上篇文章讲了 Redux 的基础概念，这里就讲讲 Redux 的高级东西，其实就是加了一个异步。Redux 不像Vuex是直接服务于Vue这个框架，所以Vuex里面封装的很好，mutation，action 啥都有了（Vuex 的 mutation 是 redux 的同步 action，Vuex 的 action 是 redux 的异步 action）。但是 Redux 其实是一个独立的不受框架限制的库，所以设计的时候可扩展性更加高一点。所以 Redux 的异步 action 需要第三方库就是所谓的中间件来完成，所以想理解异步 action，我们就先了解一下 Redux 中间件的原理。
什么是中间件
最早接触中间件这个概念是从 express，然后是 koa，其实中间件就是插件模式。拦截原先的代码执行过程，reudx 中的中间件就是让原来 action ==> reducer 变成 action ==> middleware ==> reducer。这也就是使同步 action 变异步 action 的最终奥义。
如何使用中间件
这里还是以 logger 为例子，由于这篇文章主要剖析 Redux 执行中间件的过程，如有小伙伴想知道中间件怎么写的请异步官网如何一步步写一个redux中间件，这里简单点直接一笔带过。
// 中间件的基本原理写法function logger(store){ return function(next){ return function(action){ console.log(preState, store.getState()) next(action) console.log(nextState, store.getState()) } }}
// Redux 中使用中间件import { applyMiddleware, createStore, combineReducers } from reduxlet rootReducer = combineReducers({ todoApp, visibility_filter})let initialState = {}let store = createStore({ rootReducer, initialState, // 这里来使用中间件，applyMiddleware 是 redux 提供的唯一一个 store 增强器的 api applyMiddleware(logger, some_other_middleware) })
applyMiddleware
下面就是敲黑板时间，啪啪啪。先看下 applyMiddleware 的源码：
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.` ) } let chain = [] const middlewareAPI = { getState: store.getState, dispatch: (...args) => dispatch(...args) } chain = middlewares.map(middleware => middleware(middlewareAPI)) dispatch = compose(...chain)(store.dispatch) return { ...store, dispatch } }}
1、applyMiddleware() 执行完成后返回了一个闭包函数，目的是将创建 store 的步骤放在这个闭包内执行，这样 middleware 就可以共享 store 对象。我看到这里有个疑惑，不是说只有一个唯一 store 的么，我们上面开始初始化的时候 let store = createStore() 就创建了一个 store 了，难道自己打自己脸了？这里我们先留个疑问在这里，下面来讲。
2、map middlewares 后得到新的数组 chain
3、通过 compose 后得到改造后的 dispatch 方法
4、最后返回新的 store
这里来解决一下上面的疑惑，我们就看一下 createStore 的源码，我们主要看一下下面这段代码
function createStore(reducer, preloadedState, enhancer) { .... if (typeof enhancer !== undefined) { if (typeof enhancer !== function) { throw new Error(Expected the enhancer to be a function.) } return enhancer(createStore)(reducer, preloadedState) } ...}
如果我们传入 enhancer 这个增强器函数，整个 createStore 就会返回，直接进入 enhancer 函数的逻辑。所以在初始化得到的 store 并不是初始化 createStore 里面的返回的原始 store，而是在那个闭包函数里面调用的 createStore 创建的 store（只不过这个 store 里面的 dispatch 的方法是经过改造后的）。
下面贴一下两个 createStore 实际调用的参数
// 初始化的时候createStore有三个参数createStore(reducer, initialState, enhancer)
// 闭包函数里面 createStore 实际只有两个参数，少了一个增强器函数，官方里面用...args这个方式表示了function applyMiddleware(...middlewares) { return createStore => (reducer, initialState) => { // 注意下面这里createStore，这里得到的store就是初始化里面拿到的store，还是唯一一个 const store = createStore(reducer, initialState) .... }}
第二步里面的 map 方法第一次调用了中间件，所以chain数组里面的每一项应该是下面这样的
function(next){ return function(action){ next(action) }}
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)))}
WTF，这么简单么，但是我真的看了很久，实在是愚钝….只好一步一步写下来。下面就全部以代码形式写了
// 我们知道经过第二步后，chain数组里面的函数形式了，那我们这里就模拟三个，相当于chain=[A, B, C]function A(next) { return function dispatchA(action) { let result = next(action) return result }}function B(next) { return function dispatchB(action) { let result = next(action) return result }}function C(next) { return function dispatchC(action) { let result = next(action) return result }}// 这里我们执行chain.reduce((a, b) => (...args) => a(b(...args)))，箭头函数写的方便，读起来真的不习惯，改造一下let result = [A,B,C].reduce(function(initial, current){ return function(...args) { return initial(current(...args)) }})// 清晰一点了。这里调用reduce没有初始化值，所以数组第一个当做默认值，所以最后result也就是经过compose后得到的结果是下面这样的，result = function(...args){ return A(B(C(...args)))}// 接下来继续往下dispatch = compose(...chain)(store.dispatch) 就变成了dispatch = result(store.dispatch) = A(B(C(store.dispatch)))// A(B(C(store.dispatch)))这个函数怎么执行，真的惨...先分析，一层一层往里去执行// A(next) next指向函数B，那就找B，找到了执行B(next)，// 额，next又指向函数C，继续找，找到了执行C(next)，// 这次next指向的是store.dispatch，那就执行，返回了函数dispatchC// 好的，终于返回值了，那么B(next)中next指向dispatchC，执行返回了dispatchB// 继续，A(next)中的next就是指向dispatchB，执行并返回得到dispatchA// 所以，最后newDispatch = dispatchA// 我们真正调用dispatch(action)的时候就是调用newDispatch(action)// 第一步function dispatchA(action){ let result = next(action) // next闭包指向dispatchB return result}// 第二步function dispatchB(action){ let result = next(action) // next闭包指向dispatchC return result}// 第三步function dispatchC(action){ let result = next(action)// next闭包指向原始的store.dispatch，store.dispatch 会执行 reducer 生成最新的 store 数据 return result}// 第四步，执行dispatchC中next后的代码// 第五步，执行dispatchB中next后的代码// 第六步，执行dispatchA中next后的代码嗯，所以整个执行 action 的过程为 A -> B -> C -> dispatch -> C -> B -> A，标准的洋葱模型。
好吧，大概讲完了，有错希望大家及时指出，共同学习。
