前言
"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)))
}
