redux源码学习笔记 - applyMiddleware

在创建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时,有如下打印

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

posted @ 2019-04-25 12:03  Shapeying  阅读(741)  评论(1编辑  收藏  举报