Redux middleware(中间件)

middleWare

听到这个词感觉就有点高深的感觉有没有，其实middleWare就是帮我们增加一些功能，例如异步、日志等
原本我们redux流程是这样的

现在增加了中间件进行附加功能

例如使用thunk、logger

applyMiddleware(thunk, logger)

applyMiddleware源码剖析

let store =createStore(reducer,applyMiddleware(logger))

我们使用中间件在createSotre在源码内部会这样调用

return enhancer(createStore)(reducer, preloadedState)

等价于

applyMiddleware(createStore)(reducer, preloadedState)

applyMiddware源码

export default function applyMiddleware(...middlewares) { //thunk,logger
  return createStore => (...args) => { //args = reducer,preloadedState
    const store = createStore(...args)
    let dispatch = () => {
      throw new Error(
        'Dispatching while constructing your middleware is not allowed. ' +
          'Other middleware would not be applied to this dispatch.'
      )
    }

    const middlewareAPI = {  //设置原生的state和dispatch
      getState: store.getState,
      dispatch: (...args) => dispatch(...args)
    }
    const chain = middlewares.map(middleware => middleware(middlewareAPI))//对中间件进行包裹得到一个函数数组
    dispatch = compose(...chain)(store.dispatch) //通过compose把他们合并起来返回的结果 (...args) => a(b(...args))
    // 其实compose内部返回的结果就是这样的(...chain) => (thunk(looger()))  当前只适用了两个中间件
    return {
      ...store,
      dispatch
    }
  }
}