欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

redux源码学习笔记 - applyMiddleware

程序员文章站 2022-07-02 16:45:19
在创建store时, ,除了reducer函数,初始状态,还可以传入 。这个enhancer在createStore的源码中是这样使用的 它可以接受createStore方法并进行 自定义改装 ,然后再使用改装后的方法创建仓库。 而redux官方提供的enhancer就只有 。 applyMiddl ......

在创建store时,createstore(reducer, preloadedstate, enhancer),除了reducer函数,初始状态,还可以传入enhancer。这个enhancer在createstore的源码中是这样使用的

    return enhancer(createstore)(reducer, preloadedstate)

它可以接受createstore方法并进行自定义改装,然后再使用改装后的方法创建仓库。

而redux官方提供的enhancer就只有applymiddleware

applymiddleware(...middlewares)

applymiddleware的主要功能是改写createstore中的dispatch方法,并且可以将多个middleware组合到一起,形式链式的调用,前后互不影响。这样要求middleware必须遵循一定的格式。({ getstate, dispatch }) => next => action => {}

applymiddleware的实现

export default function applymiddleware(...middlewares) {
  // 返回一个enhancer函数,接受createstore作为参数(可以对照enhancer的调用方式来看)
  return createstore => (...args) => { // enhancer函数接受reducer, preloadedstate来创建仓库
    const store = createstore(...args)
    // 自定义dispatch函数,在构造middleware的时候,不允许调用dispatch
    let dispatch = () => {
      throw new error(
        `dispatching while constructing your middleware is not allowed. ` +
          `other middleware would not be applied to this dispatch.`
      )
    }

    const middlewareapi = {
      getstate: store.getstate, // store中的getstate函数,用于获取状态
      dispatch: (...args) => dispatch(...args) // 自定义的dispatch函数
    }
    // 传入到getstate,和dispatch到middleware中 生成 next => action => {} 格式的函数
    const chain = middlewares.map(middleware => middleware(middlewareapi))

    // 自定义的dispatch更新为 多个middleware的组合函数;传入store原本dispatch函数给组合函数(会在最后一个middle中作为next函数)
    dispatch = compose(...chain)(store.dispatch)

    // 返回store仓库,此时的dispatch函数已被改写,为多个middleware的组合函数
    return {
      ...store,
      dispatch
    }
  }
}

组合和链式调用

关键是要理解这里dispatch = compose(...chain)(store.dispatch),dispatch被改写为多个middleware的组合函数。

compose函数中关键的一句是return funcs.reduce((a, b) => (...args) => a(b(...args)))

a可以理解为next => action => {},而next可以理解为b(...args) 就是下一个middleware的 ation => {} 函数。所以实现了链式调用。a中做了自定义的操作,会调用b,b调用c···最后一个调用store.dispatch

用两个middleware做例子来梳理改写后的dispatch(action)的调用过程。

自定义middleware

middleware必须遵循一定的格式。({ getstate, dispatch }) => next => action => {}

{getstate, dispatch}参数是在applymiddleware的源码中const chain = middlewares.map(middleware => middleware(middlewareapi))这一部分被传入的,store的getstate和改写后的dispatch。

next是下一个middleware或者store.dispatch,action是触发的动作

/*logger*/
export default ({dispatch,getstate}) => next => action => {
    // 做一些自定义的事情
    console.log('will dispatch ation',action);
    console.log('next in loggere',next);

    // 调用下一个middleware
    let returnvalue = next(action);

    console.log('state after dispatch',getstate());

    return returnvalue;
}
/*test*/
export default ({dispatch,getstate}) => next => action => {
        
    console.log('next in  test',next)

    return next(action);
}

使用applymiddleware

store = createstore(reducer,applymiddleware(logger,test))

触发action时,有如下打印

redux源码学习笔记 - applyMiddleware

logger做完自定义操作后,调用下一个middleware(test)函数,test是最后一个middleware,它的next是store.dispatch,就触发了action。