这是我读过的最好的说明文档，没有之一，它清晰的说明了 redux middleware 的演化过程，漂亮地演绎了一场从分析问题到解决问题，并不断优化的思维过程。
总体
本文还是主要看一下它的中间件实现, 先简单说一下 redux 的核心处理逻辑, 是其入口程序，工厂方法，返回一个 store 实例，store实例的最关键的方法就是 dispatch , 而 要做的就是一件事：
currentState = currentReducer(currentState, action)
即调用reducer, 传入当前state和action返回新的state。
所以要模拟基本的 redux 执行只要实现 createStore , dispatch 方法即可。其它的内容如 bindActionCreators, combineReducers 以及 subscribe 监听都是辅助使用的功能，可以暂时不关注。
中间件处理
然后就到了核心的”中间件" 实现部分即：
// applyMiddleware.js import compose from './compose' export default function applyMiddleware(...middlewares) { return createStore => (...args) => { 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 = { getState: store.getState, dispatch: (...args) => dispatch(...args) } const chain = middlewares.map(middleware => middleware(middlewareAPI)) dispatch = compose(...chain)(store.dispatch) return { ...store, dispatch } } }
redux 中间件提供的扩展是在 action 发起之后，到达 reducer 之前，它的实现思路就和express 、 koa 有些不同了，它没有通过封装 store.dispatch, 在它前面添加 中间件处理程序，而是通过递归覆写 dispatch ，不断的传递上一个覆写的 dispatch 来实现。
每一个 redux 中间件的形式为 store => next => action => { xxx }
这里主要有两层函数嵌套：
最外层函数接收参数store, 对应于 applyMiddleware.js 中的处理代码是 const chain = middlewares.map(middleware => middleware(middlewareAPI)), middlewareAPI 即为传入的store 。这一层是为了把 store 的 api 传递给中间件使用，主要就是两个api:
getState, 直接传递store.getState.
dispatch: (...args) => dispatch(...args)，这里的实现就很巧妙了，并不是store.dispatch, 而是一个外部的变量dispatch, 这个变量最终指向的是覆写后的dispatch, 这样做的原因在于，对于 redux-thunk 这样的异步中间件，内部调用store.dispatch 的时候仍然后走一遍所有“中间件”。
返回的chain就是第二层的数组，数组的每个元素都是这样一个函数next => action => { xxx }, 这个函数可以理解为 接受一个dispatch返回一个dispatch, 接受的dispatch 是后一个中间件返回的dispatch.
还有一个关键函数即 , 主要作用是 compose(f, g, h) 返回 () => f(g(h(..args)))
现在在来理解 dispatch = compose(...chain)(store.dispatch) 就相对容易了，原生的 store.dispatch 传入最后一个“中间件”，返回一个新的 dispatch , 再向外传递到前一个中间件，直至返回最终的 dispatch, 当覆写后的dispatch 调用时，每个“中间件“的执行又是从外向内的”洋葱圈“模型。
至此，redux中间件就完成了。
其它关键点
redux 中间件的实现中还有一点实现也值得学习，为了让”中间件“只能应用一次，applyMiddleware 并不是作用在 store 实例上，而是作用在 createStore 工厂方法上。怎么理解呢？如果applyMiddleware 是这样的
(store, middlewares) => {}
那么当多次调用 applyMiddleware(store, middlewares) 的时候会给同一个实例重复添加同样的中间件。所以 applyMiddleware 的形式是
(...middlewares) => (createStore) => createStore,
这样，每一次应用中间件时都是创建一个新的实例，避免了中间件重复应用问题。
这种形式会接收 middlewares 返回一个 createStore 的高阶方法，这个方法一般被称为 createStore的 enhance 方法，内部即增加了对中间件的应用，你会发现这个方法和中间件第二层 (dispatch) => dispatch 的形式一致，所以它也可以用于compose 进行多次增强。同时createStore 也有第三个参数enhance 用于内部判断，自增强。所以 redux 的中间件使用可以有两种写法：
第一种：用 applyMiddleware 返回 enhance 增强 createStore
store = applyMiddleware(middleware1, middleware2)(createStore)(reducer, initState)
第二种: createStore 接收一个 enhancer 参数用于自增强
store = createStore(reducer, initState, applyMiddleware(middleware1, middleware2))
第二种使用会显得直观点，可读性更好。