深入 Reudx 之 applyMiddleware

前言

"It provides a third-party extension point between dispatching an action, and the moment it reaches the reducer."
这是 Redux 作者 Dan Abramov 对 middleware 的描述。它提供了一个分类处理 action 的机会。在 middleware 中，你可以检阅每一个流过的 action，挑选除特定类型的 action 进行相应操作，给你一个改变 action 的机会。

面对多样的业务场景，单纯地修改 dispatch 或 reducer 的代码显然不具有普适性，需要的是可以组合的，自由插拔的插件机制，Redux 借鉴了 Koa 里 middleware 的思想。Redux 中 reducer 更关系的是数据的转化逻辑，所以 middleware就是为了增强 dispatch 而出现。

Redux源码之 applyMiddleware

解读 redux 源码之 applyMiddleware，代码目录在 redux/src/applyMiddleware。
对应 redux 版本：3.7.2。

import compose from './compose'

/**
 * 创建一个将中间件应用于调度方法的存储增强器的 Redux store。这对于表达
 * 各种任务而言非常方便，比如简洁的异步执行操作，或者记录每次 action 
 * payload。
 *
 * 请参阅 `redux-thunk`作为 Redux 中间件的实例。
 *
 * 因为中间件可能是异步，所以这应该是第一个 store 增强器在组成链。
 *
 * 请注意，每个中间件都将被赋予`dispatch`和`getState`功能。
 *
 * @param {...Function} middlewares 要应用的中间件链。
 * @param {Function} 应用中间件的 store 增减器。
 */
export default function applyMiddleware(...middlewares) {
  return (createStore) => (reducer, preloadedState, enhancer) => {
    const store = createStore(reducer, preloadedState, enhancer)
    let dispatch = store.dispatch
    let chain = []

    const middlewareAPI = {
      getState: store.getState,
      dispatch: (action) => dispatch(action)
    }
    chain = middlewares.map(middleware => middleware(middlewareAPI))
    dispatch = compose(...chain)(store.dispatch)

    return {
      ...store,
      dispatch
    }
  }
}

export default function compose(...funcs) {
  if (funcs.length === 0) {
    return arg => arg
  }

  if (funcs.length === 1) {
    return funcs[0]
  }

  return funcs.reduce((a, b) => (...args) => a(b(...args)))
}