React：Redux中间件

        结合 Redux应用实例与 applyMiddleware源码，对 Redux中间件的实现原理进行分析。在此基础上，对“面向切面”这一经典的编程思想建立初步的认识。

认识 Redux 中间件

中间件的引入

  在之前介绍 createStore函数时，已经简单地提过中间件——中间件相关的信息将作为 createStore函数的一个 function类型的入参被传入。这里简单复习一下 createStore的调用规则，示例代码如下：

// 引入 redux
import { createStore, applyMiddleware } from 'redux'
......
// 创建 store
const store = createStore(
    reducer,
    initial_state,
    applyMiddleware(middleware1, middleware2, ...)
);

        可以看到，redux对外暴露了 applyMiddleware这个方法。applyMiddleware接受任意个中间件作为入参，而它的返回值将会作为参数传入 createStore，这就是中间件的引入过程。

中间件的工作模式

中间件的引入，会为 Redux工作流带来什么样的改变呢？这里以 redux-thunk 为例，从经典的“异步 Action”场景切入，一起看看中间件是如何解决问题的。

redux-thunk——经典的异步 Action 解决方案

        在针对 Redux 源码主流程的分析中，不难看出这样一个规律——Redux 源码中只有同步操作，也就是说当我们 dispatch action 时，state会被立即更新。

  那如果想要在 Redux 中引入异步数据流，该怎么办呢？Redux 官方给出的建议是使用中间件来增强 createStore。支持异步数据流的 Redux 中间件有很多，其中最适合用来快速上手的应该就是 redux-thunk了。

  redux-thunk 的引入和普通中间件无异，可以参考以下示例：

// 引入 redux-thunk
import thunkMiddleware from 'redux-thunk'
import reducer from './reducers'
// 将中间件用 applyMiddleware 包装后传入
const store = createStore(reducer, applyMiddleware(thunkMiddleware))

 这里帮大家复习一个小小的知识点，之前分析 createStore整体源码时，曾经在 createStore逻辑的开头见过这样一段代码：

// 这里处理的是没有设定初始状态的情况，也就是第一个参数和第二个参数都传 function 的情况
if (typeof preloadedState === 'function' && typeof enhancer === 'undefined') {
  // 此时第二个参数会被认为是 enhancer（中间件）
  enhancer = preloadedState;
  preloadedState = undefined;
}

        这段代码告诉我们，在只传入两个参数的情况下，createStore会去检查第二个参数是否是 function类型，若是，则认为第二个参数是“enhancer”。这里的“enhancer”是“增强器”的意思，而 applyMiddleware包装过的中间件，正是“增强器”的一种。这也就解释了为什么上面 redux-thunk 的调用示例中，applyMiddleware调用明明是作为 createStore的第二个参数被传入的，却仍然能够被识别为中间件信息。

  redux-thunk 带来的改变非常好理解，它允许我们以函数的形式派发一个 action，像这样（解析在注释里）：

// a