Redux 进阶教程

原文（保持更新）：https://github.com/kenberkeley/redux-simple-tutorial/blob/master/redux-advanced-tutorial.md

写在前面

相信您已经看过 Redux 简明教程，本教程是简明教程的实战化版本，伴随源码分析
Redux 用的是 ES6 编写，看到有疑惑的地方的，可以复制粘贴到这里在线编译 ES5

§ Redux API 总览

在 Redux 的源码目录 src/，我们可以看到如下文件结构：

  1. ├── utils/
  2. │     ├── warning.js # 打酱油的，负责在控制台显示警告信息
  3. ├── applyMiddleware.js
  4. ├── bindActionCreators.js
  5. ├── combineReducers.js
  6. ├── compose.js
  7. ├── createStore.js
  8. ├── index.js # 入口文件

除去打酱油的 utils/warning.js 以及入口文件 index.js，剩下那 5 个就是 Redux 的 API

§ compose(…functions)

先说这个 API 的原因是它没有依赖，是一个纯函数

⊙ 源码分析

  1. /**
  2.  * 看起来逼格很高，实际运用其实是这样子的：
  3.  * compose(f, g, h)(...args) => f(g(h(...args)))
  4.  *
  5.  * 值得注意的是，它用到了 reduceRight，因此执行顺序是从右到左
  6.  *
  7.  * @param  {多个函数，用逗号隔开}
  8.  * @return {函数}
  9.  */
  11. export default function compose(...funcs) {
  12.   if (funcs.length === 0) {
  13.     return arg => arg
  14.   }
  16.   if (funcs.length === 1) {
  17.     return funcs[0]
  18.   }
  20.   const last = funcs[funcs.length - 1]
  21.   const rest = funcs.slice(0, -1)
  22.   return (...args) => rest.reduceRight((composed, f) => f(composed), last(...args))
  23. }

这里的关键点在于，reduceRight 可传入初始值：

  1. // 由于 reduce / reduceRight 仅仅是方向的不同，因此下面用 reduce 说明即可
  2. var arr = [1, 2, 3, 4, 5]
  4. var re1 = arr.reduce(function(total, i) {
  5.   return total + i
  6. })
  7. console.log(re1) // 15
  9. var re2 = arr.reduce(function(total, i) {
  10.   return total + i
  11. }, 100) // <---------------传入一个初始值
  12. console.log(re2) // 115

下面是 compose 的实例（在线演示）：

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.   <script src="//cdn.bootcss.com/redux/3.5.2/redux.min.js"></script>
  5. </head>
  6. <body>
  7. <script>
  8. function func1(num) {
  9.   console.log('func1 获得参数 ' + num);
  10.   return num + 1;
  11. }
  13. function func2(num) {
  14.   console.log('func2 获得参数 ' + num);
  15.   return num + 2;
  16. }
  18. function func3(num) {
  19.   console.log('func3 获得参数 ' + num);
  20.   return num + 3;
  21. }
  23. // 有点难看（如果函数名再长一点，那屏幕就不够宽了）
  24. var re1 = func3(func2(func1(0)));
  25. console.log('re1：' + re1);
  27. console.log('===============');
  29. // 很优雅
  30. var re2 = Redux.compose(func3, func2, func1)(0);
  31. console.log('re2：' + re2);
  32. </script>
  33. </body>
  34. </html>

控制台输出：

  1. func1 获得参数 0
  2. func2 获得参数 1
  3. func3 获得参数 3
  4. re1：6
  5. ===============
  6. func1 获得参数 0
  7. func2 获得参数 1
  8. func3 获得参数 3
  9. re2：6

§ createStore(reducer, initialState, enhancer)

⊙ 源码分析

  1. import isPlainObject from 'lodash/isPlainObject'
  2. import $$observable from 'symbol-observable'
  4. /**
  5.  * 这是 Redux 的私有 action 常量
  6.  * 长得太丑了，你不要鸟就行了
  7.  */
  8. export var ActionTypes = {
  9.   INIT: '@@redux/INIT'
  10. }
  12. /**
  13.  * @param  {函数}  reducer 不多解释了
  14.  * @param  {对象}  preloadedState 主要用于前后端同构时的数据同步
  15.  * @param  {函数}  enhancer 很牛逼，可以实现中间件、时间旅行，持久化等
  16.  * ※ Redux 仅提供 applyMiddleware 这个 Store Enhancer ※
  17.  * @return {Store}
  18.  */
  19. export default function createStore(reducer, preloadedState, enhancer) {
  20.   // 这里省略的代码，到本文的最后再讲述（用于压轴你懂的）
  22.   var currentReducer = reducer
  23.   var currentState = preloadedState    // 这就是整个应用的 state
  24.   var currentListeners = []            // 用于存储订阅的回调函数，dispatch 后逐个执行
  25.   var nextListeners = currentListeners //【悬念1：为什么需要两个 存放回调函数 的变量？】
  26.   var isDispatching = false
  28.   /**
  29.    * 【悬念1·解疑】
  30.    * 试想，dispatch 后，回调函数正在乖乖地被逐个执行（for 循环进行时）
  31.    * 假设回调函数队列原本是这样的 [a, b, c, d]
  32.    *
  33.    * 现在 for 循环执行到第 3 步，亦即 a、b 已经被执行，准备执行 c
  34.    * 但在这电光火石的瞬间，a 被取消订阅！！！
  35.    *
  36.    * 那么此时回调函数队列就变成了 [b, c, d]
  37.    * 那么第 3 步就对应换成了 d！！！
  38.    * c 被跳过了！！！这就是躺枪。。。
  39.    * 
  40.    * 作为一个回调函数，最大的耻辱就是得不到执行
  41.    * 因此为了避免这个问题，本函数会在上述场景中把
  42.    * currentListeners 复制给 nextListeners
  43.    *
  44.    * 这样的话，dispatch 后，在逐个执行回调函数的过程中
  45.    * 如果有新增订阅或取消订阅，都在 nextListeners 中操作
  46.    * 让 currentListeners 中的回调函数得以完整地执行
  47.    *
  48.    * 既然新增是在 nextListeners 中 push，因此毫无疑问
  49.    * 新的回调函数不会在本次 currentListeners 的循环体中被触发
  50.    *
  51.    * （上述事件发生的几率虽然很低，但还是严谨点比较好）
  52.    */
  53.   function ensureCanMutateNextListeners() { // <-------这货就叫做【ensure 哥】吧
  54.     if (nextListeners === currentListeners) {
  55.       nextListeners = currentListeners.slice()
  56.     }
  57.   }
  59.   /**
  60.    * 返回 state
  61.    */
  62.   function getState() {
  63.     return currentState
  64.   }
  66.   /**
  67.    * 负责注册回调函数的老司机
  68.    * 
  69.    * 这里需要注意的就是，回调函数中如果需要获取 state
  70.    * 那每次获取都请使用 getState()，而不是开头用一个变量缓存住它
  71.    * 因为回调函数执行期间，有可能有连续几个 dispatch 让 state 改得物是人非
  72.    * 而且别忘了，dispatch 之后，整个 state 是被完全替换掉的
  73.    * 你缓存的 state 指向的可能已经是老掉牙的 state 了！！！
  74.    *
  75.    * @param  {函数} 想要订阅的回调函数
  76.    * @return {函数} 取消订阅的函数
  77.    */
  78.   function subscribe(listener) {
  79.     if (typeof listener !== 'function') {
  80.       throw new Error('Expected listener to be a function.')
  81.     }
  83.     var isSubscribed = true
  85.     ensureCanMutateNextListeners() // 调用 ensure 哥保平安
  86.     nextListeners.push(listener)   // 新增订阅在 nextListeners 中操作
  88.     // 返回一个取消订阅的函数
  89.     return function unsubscribe() {
  90.       if (!isSubscribed) {
  91.         return
  92.       }
  94.       isSubscribed = false
  96.       ensureCanMutateNextListeners() // 调用 ensure 哥保平安
  97.       var index = nextListeners.indexOf(listener)
  98.       nextListeners.splice(index, 1) // 取消订阅还是在 nextListeners 中操作
  99.     }
  100.   }
  102.   /**
  103.    * 改变应用状态 state 的不二法门：dispatch 一个 action
  104.    * 内部的实现是：往 reducer 中传入 currentState 以及 action
  105.    * 用其返回值替换 currentState，最后逐个触发回调函数
  106.    *
  107.    * 如果 dispatch 的不是一个对象类型的 action（同步的），而是 Promise / thunk（异步的）
  108.    * 则需引入 redux-thunk 等中间件来反转控制权【悬念2：什么是反转控制权？】
  109.    * 
  110.    * @param & @return {对象} action
  111.    */
  112.   function dispatch(action) {
  113.     if (!isPlainObject(action)) {
  114.       throw new Error(
  115.         'Actions must be plain objects. ' +
  116.         'Use custom middleware for async actions.'
  117.       )
  118.     }
  120.     if (typeof action.type === 'undefined') {
  121.       throw new Error(
  122.         'Actions may not have an undefined "type" property. ' +
  123.         'Have you misspelled a constant?'
  124.       )
  125.     }
  127.     if (isDispatching) {
  128.       throw new Error('Reducers may not dispatch actions.')
  129.     }
  131.     try {
  132.       isDispatching = true
  133.       // 关键点：currentState 与 action 会流通到所有的 reducer
  134.       // 所有 reducer 的返回值整合后，替换掉当前的 currentState
  135.       currentState = currentReducer(currentState, action)
  136.     } finally {
  137.       isDispatching = false
  138.     }
  140.     // 令 currentListeners 等于 nextListeners，表示正在逐个执行回调函数（这就是上面 ensure 哥的判定条件）
  141.     var listeners = currentListeners = nextListeners
  143.     // 逐个触发回调函数
  144.     for (var i = 0; i < listeners.length; i++) {
  145.       listeners[i]()
  147.       /* 现在逐个触发回调函数变成了：
  148.       var listener = listeners[i]
  149.       listener() // 该中间变量避免了 this 指向 listeners 而造成泄露的问题 */
  150.       // 在此衷心感谢 @BuptStEve 在 issue7 中指出之前我对此处的错误解读
  151.     }
  153.     return action // 为了方便链式调用，dispatch 执行完毕后，返回 action（下文会提到的，稍微记住就好了）
  154.   }
  156.   /**
  157.    * 替换当前 reducer 的老司机
  158.    * 主要用于代码分离按需加载、热替换等情况
  159.    *
  160.    * @param {函数} nextReducer
  161.    */
  162.   function replaceReducer(nextReducer) {
  163.     if (typeof nextReducer !== 'function') {
  164.       throw new Error('Expected the nextReducer to be a function.')
  165.     }
  167.     currentReducer = nextReducer         // 就是这么简单粗暴！
  168.     dispatch({ type: ActionTypes.INIT }) // 触发生成新的 state 树
  169.   }
  171.   /**
  172.    * 这是留给 可观察/响应式库 的接口（详情 https://github.com/zenparsing/es-observable）
  173.    * 如果您了解 RxJS 等响应式编程库，那可能会用到这个接口，否则请略过
  174.    * @return {observable}
  175.    */
  176.   function observable() {略}
  178.   // 这里 dispatch 只是为了生成 应用初始状态
  179.   dispatch({ type: ActionTypes.INIT })
  181.   return {
  182.     dispatch,
  183.     subscribe,
  184.     getState,
  185.     replaceReducer,
  186.     [$$observable]: observable
  187.   }
  188. }

【悬念2：什么是反转控制权？ · 解疑】
在同步场景下，dispatch(action) 的这个 action 中的数据是同步获取的，并没有控制权的切换问题
但异步场景下，则需要将 dispatch 传入到回调函数。待异步操作完成后，回调函数自行调用 dispatch(action)

说白了：在异步 Action Creator 中自行调用 dispatch 就相当于反转控制权
您完全可以自己实现，也可以借助 redux-thunk / redux-promise 等中间件统一实现
（它们的作用也仅仅就是把 dispatch 等传入异步 Action Creator 罢了）

拓展阅读：阮老师的 Thunk 函数的含义与用法
题外话：您不觉得 JavaScript 的回调函数，就是反转控制权最普遍的体现吗？

§ combineReducers(reducers)

⊙ 应用场景

简明教程中的 code-7 如下：

  1. /** 本代码块记为 code-7 **/
  2. var initState = {
  3.   counter: 0,
  4.   todos: []
  5. }
  7. function reducer(state, action) {
  8.   if (!state) state = initState
  10.   switch (action.type) {
  11.     case 'ADD_TODO':
  12.       var nextState = _.cloneDeep(state) // 用到了 lodash 的深克隆
  13.       nextState.todos.push(action.payload) 
  14.       return nextState
  16.     default:
  17.       return state
  18.   }
  19. }

上面的 reducer 仅仅是实现了 “新增待办事项” 的 state 的处理
我们还有计数器的功能，下面我们继续增加计数器 “增加 1” 的功能：

  1. /** 本代码块记为 code-8 **/
  2. var initState = { counter: 0, todos: [] }
  4. function reducer(state, action) {
  5.   if (!state) return initState       // 若是初始化可立即返回应用初始状态
  6.   var nextState = _.cloneDeep(state) // 否则二话不说先克隆
  8.   switch (action.type) {
  9.     case 'ADD_TODO':  // 新增待办事项
  10.       nextState.todos.push(action.payload) 
  11.       break   
  12.     case 'INCREMENT': // 计数器加 1
  13.       nextState.counter = nextState.counter + 1
  14.       break
  15.   }
  16.   return nextState
  17. }

如果说还有其他的动作，都需要在 code-8 这个 reducer 中继续堆砌处理逻辑
但我们知道，计数器 与 待办事项 属于两个不同的模块，不应该都堆在一起写
如果之后又要引入新的模块（例如留言板），该 reducer 会越来越臃肿
此时就是 combineReducers 大显身手的时刻：

  1. 目录结构如下
  2. reducers/
  3.    ├── index.js
  4.    ├── counterReducer.js
  5.    ├── todosReducer.js
  1. /** 本代码块记为 code-9 **/
  2. /* reducers/index.js */
  3. import { combineReducers } from 'redux'
  4. import counterReducer from './counterReducer'
  5. import todosReducer from './todosReducer'
  7. const rootReducer = combineReducers({
  8.   counter: counterReducer, // 键名就是该 reducer 对应管理的 state
  9.   todos: todosReducer
  10. })
  12. export default rootReducer
  14. -------------------------------------------------
  16. /* reducers/counterReducer.js */
  17. export default function counterReducer(counter = 0, action) { // 传入的 state 其实是 state.counter
  18.   switch (action.type) {
  19.     case 'INCREMENT':
  20.       return counter + 1 // counter 是值传递，因此可以直接返回一个值
  21.     default:
  22.       return counter
  23.   }
  24. }
  26. -------------------------------------------------
  28. /* reducers/todosReducers */
  29. export default function todosReducer(todos = [], action) { // 传入的 state 其实是 state.todos
  30.   switch (action.type) {
  31.     case 'ADD_TODO':
  32.       return [ ...todos, action.payload ]
  33.     default:
  34.       return todos
  35.   }
  36. }

code-8 reducer 与 code-9 rootReducer 的功能是一样的，但后者的各个子 reducer 仅维护对应的那部分 state
其可操作性、可维护性、可扩展性大大增强

Flux 中是根据不同的功能拆分出多个 store 分而治之
而 Redux 只允许应用中有唯一的 store，通过拆分出多个 reducer 分别管理对应的 state

下面继续来深入使用 combineReducers。一直以来我们的应用状态都是只有两层，如下所示：

  1. state
  2.   ├── counter: 0
  3.   ├── todos: []

如果说现在又有一个需求：在待办事项模块中，存储用户每次操作（增删改）的时间，那么此时应用初始状态树应为：

  1. state
  2.   ├── counter: 0
  3.   ├── todo
  4.         ├── optTime: []
  5.         ├── todoList: [] # 这其实就是原来的 todos！

那么对应的 reducer 就是：

  1. 目录结构如下
  2. reducers/
  3.    ├── index.js <-------------- combineReducers (生成 rootReducer)
  4.    ├── counterReducer.js
  5.    ├── todoReducers/
  6.            ├── index.js <------ combineReducers
  7.            ├── optTimeReducer.js
  8.            ├── todoListReducer.js
  1. /* reducers/index.js */
  2. import { combineReducers } from 'redux'
  3. import counterReducer from './counterReducer'
  4. import todoReducers from './todoReducers/'
  6. const rootReducer = combineReducers({
  7.   counter: counterReducer,
  8.   todo: todoReducers
  9. })
  11. export default rootReducer
  13. =================================================
  15. /* reducers/todoReducers/index.js */
  16. import { combineReducers } from 'redux'
  17. import optTimeReducer from './optTimeReducer'
  18. import todoListReducer from './todoListReducer'
  20. const todoReducers = combineReducers({
  21.   optTime: optTimeReducer,
  22.   todoList: todoListReducer
  23. })
  25. export default todoReducers
  27. -------------------------------------------------
  29. /* reducers/todosReducers/optTimeReducer.js */
  30. export default function optTimeReducer(optTime = [], action) {
  31.   // 咦？这里怎么没有 switch-case 分支？谁说 reducer 就一定包含 switch-case 分支的？
  32.   return action.type.includes('TODO') ? [ ...optTime, new Date() ] : optTime
  33. }
  35. -------------------------------------------------
  37. /* reducers/todosReducers/todoListReducer.js */
  38. export default function todoListReducer(todoList = [], action) {
  39.   switch (action.type) {
  40.     case 'ADD_TODO':
  41.       return [ ...todoList, action.payload ]
  42.     default:
  43.       return todoList
  44.   }
  45. }

无论您的应用状态树有多么的复杂，都可以通过逐层下分管理对应部分的 state：

  1.                                  counterReducer(counter, action) -------------------- counter
  2.                               ↗                                                              ↘
  3. rootReducer(state, action) —→∑     ↗ optTimeReducer(optTime, action) ------ optTime ↘         nextState
  4.                               ↘—→∑                                                    todo  ↗
  5.                                    ↘ todoListReducer(todoList,action) ----- todoList ↗
  8. 注：左侧表示 dispatch 分发流，∑ 表示 combineReducers；右侧表示各实体 reducer 的返回值，最后汇总整合成 nextState

看了上图，您应该能直观感受到为何取名为 reducer 了吧？把 state 分而治之，极大减轻开发与维护的难度

无论是 dispatch 哪个 action，都会流通所有的 reducer
表面上看来，这样子很浪费性能，但 JavaScript 对于这种纯函数的调用是很高效率的，因此请尽管放心
这也是为何 reducer 必须返回其对应的 state 的原因。否则整合状态树时，该 reducer 对应的键值就是 undefined

⊙ 源码分析

仅截取关键部分，毕竟有很大一部分都是类型检测警告

  1. function combineReducers(reducers) {
  2.   var reducerKeys = Object.keys(reducers)
  3.   var finalReducers = {}
  5.   for (var i = 0; i < reducerKeys.length; i++) {
  6.     var key = reducerKeys[i]
  7.     if (typeof reducers[key] === 'function') {
  8.       finalReducers[key] = reducers[key]
  9.     }
  10.   }
  12.   var finalReducerKeys = Object.keys(finalReducers)
  14.   // 返回合成后的 reducer
  15.   return function combination(state = {}, action) {
  16.     var hasChanged = false
  17.     var nextState = {}
  18.     for (var i = 0; i < finalReducerKeys.length; i++) {
  19.       var key = finalReducerKeys[i]
  20.       var reducer = finalReducers[key]
  21.       var previousStateForKey = state[key]                       // 获取当前子 state
  22.       var nextStateForKey = reducer(previousStateForKey, action) // 执行各子 reducer 中获取子 nextState
  23.       nextState[key] = nextStateForKey                           // 将子 nextState 挂载到对应的键名
  24.       hasChanged = hasChanged || nextStateForKey !== previousStateForKey
  25.     }
  26.     return hasChanged ? nextState : state
  27.   }
  28. }

在此我的注释很少，因为代码写得实在是太过明了了，注释反而影响阅读
作者 Dan 用了大量的 for 循环，的确有点不够优雅

§ bindActionCreators(actionCreators, dispatch)

这个 API 有点鸡肋，它无非就是做了这件事情：dispatch(ActionCreator(XXX))

⊙ 源码分析

  1. /* 为 Action Creator 加装上自动 dispatch 技能 */
  2. function bindActionCreator(actionCreator, dispatch) {
  3.   return (...args) => dispatch(actionCreator(...args))
  4. }
  6. export default function bindActionCreators(actionCreators, dispatch) {
  7.   // 省去一大坨类型判断
  8.   var keys = Object.keys(actionCreators)
  9.   var boundActionCreators = {}
  10.   for (var i = 0; i < keys.length; i++) {
  11.     var key = keys[i]
  12.     var actionCreator = actionCreators[key]
  13.     if (typeof actionCreator === 'function') {
  14.       // 逐个装上自动 dispatch 技能
  15.       boundActionCreators[key] = bindActionCreator(actionCreator, dispatch)
  16.     }
  17.   }
  18.   return boundActionCreators
  19. }

⊙ 应用场景

简明教程中的 code-5 如下：

  1. <--! 本代码块记为 code-5 -->
  2. <input id="todoInput" type="text" />
  3. <button id="btn">提交</button>
  5. <script>
  6. $('#btn').on('click', function() {
  7.   var content = $('#todoInput').val() // 获取输入框的值
  8.   var action = addTodo(content)       // 执行 Action Creator 获得 action
  9.   store.dispatch(action)              // 手动显式 dispatch 一个 action
  10. })
  11. </script>

我们看到，调用 addTodo 这个 Action Creator 后得到一个 action，之后又要手动 dispatch(action)
如果是只有一个两个 Action Creator 还是可以接受，但如果有很多个那就显得有点重复了（其实我觉得不重复哈哈哈）
这个时候我们就可以利用 bindActionCreators 实现自动 dispatch：

  1. <input id="todoInput" type="text" />
  2. <button id="btn">提交</button>
  4. <script>
  5. // 全局引入 Redux、jQuery，同时 store 是全局变量
  6. var actionsCreators = Redux.bindActionCreators(
  7.   { addTodo: addTodo },
  8.   store.dispatch // 传入 dispatch 函数
  9. )
  11. $('#btn').on('click', function() {
  12.   var content = $('#todoInput').val()
  13.   actionCreators.addTodo(content) // 它会自动 dispatch
  14. })
  15. </script>

综上，这个 API 没啥卵用，尤其是异步场景下，基本用不上

§ applyMiddleware(…middlewares)

Redux 中文文档 高级 · Middleware 有提到中间件的演化由来

首先要理解何谓 Middleware，何谓 Enhancer

⊙ Middleware

说白了，Redux 引入中间件机制，其实就是为了在 dispatch 前后，统一“做爱做的事”。。。
诸如统一的日志记录、引入 thunk 统一处理异步 Action Creator 等都属于中间件
下面是一个简单的打印动作前后 state 的中间件：

  1. /* 装逼写法 */
  2. const printStateMiddleware = ({ getState }) => next => action => {
  3.   console.log('state before dispatch', getState())
  5.   let returnValue = next(action)
  7.   console.log('state after dispatch', getState())
  9.   return returnValue
  10. }
  12. -------------------------------------------------
  14. /* 降低逼格写法 */
  15. function printStateMiddleware(middlewareAPI) { // 记为【锚点-1】，中间件内可用的 API
  16.   return function (dispatch) {                 // 记为【锚点-2】，传入上级中间件处理逻辑（若无则为原 store.dispatch）
  18.     // 下面记为【锚点-3】，整个函数将会被传到下级中间件（如果有的话）作为它的 dispatch 参数
  19.     return function (action) { // <---------------------------------------------- 这货就叫做【中间件处理逻辑哥】吧
  20.       console.log('state before dispatch', middlewareAPI.getState())
  22.       var returnValue = dispatch(action) // 还记得吗，dispatch 的返回值其实还是 action
  24.       console.log('state after dispatch', middlewareAPI.getState())
  26.       return returnValue // 将 action 返回给上一个中间件（实际上可以返回任意值，或不返回）
  27.       // 在此衷心感谢 @zaleGZL 在 issue15 中指出之前我对此处的错误解读
  28.     }
  29.   }
  30. }

⊙ Store Enhancer

说白了，Store 增强器就是对生成的 store API 进行改造，这是它与中间件最大的区别（中间件不修改 store 的 API）
而改造 store 的 API 就要从它的缔造者 createStore 入手。例如，Redux 的 API applyMiddleware 就是一个 Store 增强器：

  1. import compose from './compose' // 这货的作用其实就是 compose(f, g, h)(action) => f(g(h(action)))
  3. /* 传入一坨中间件 */
  4. export default function applyMiddleware(...middlewares) {
  6.   /* 传入 createStore */
  7.   return function(createStore) {
  9.     /* 返回一个函数签名跟 createStore 一模一样的函数，亦即返回的是一个增强版的 createStore */
  10.     return function(reducer, preloadedState, enhancer) {
  12.       // 用原 createStore 先生成一个 store，其包含 getState / dispatch / subscribe / replaceReducer 四个 API
  13.       var store = createStore(reducer, preloadedState, enhancer)
  15.       var dispatch = store.dispatch // 指向原 dispatch
  16.       var chain = [] // 存储中间件的数组
  18.       // 提供给中间件的 API（其实都是 store 的 API）
  19.       var middlewareAPI = {
  20.         getState: store.getState,
  21.         dispatch: (action) => dispatch(action)
  22.       }
  24.       // 给中间件“装上” API，见上面 ⊙Middleware【降低逼格写法】的【锚点-1】 
  25.       chain = middlewares.map(middleware => middleware(middlewareAPI))
  27.       // 串联所有中间件
  28.       dispatch = compose(...chain)(store.dispatch)
  29.       // 例如，chain 为 [M3, M2, M1]，而 compose 是从右到左进行“包裹”的
  30.       // 那么，M1 的 dispatch 参数为 store.dispatch（见【降低逼格写法】的【锚点-2】）
  31.       // 往后，M2 的 dispatch 参数为 M1 的中间件处理逻辑哥（见【降低逼格写法】的【锚点-3】）
  32.       // 同样，M3 的 dispatch 参数为 M2 的中间件处理逻辑哥
  33.       // 最后，我们得到串联后的中间件链：M3(M2(M1(store.dispatch)))
  34.       //（这种形式的串联类似于洋葱，可参考文末的拓展阅读：中间件的洋葱模型）
  35.       // 在此衷心感谢 @ibufu 在 issue8 中指出之前我对此处的错误解读
  37.       return {
  38.         ...store, // store 的 API 中保留 getState / subsribe / replaceReducer
  39.         dispatch  // 新 dispatch 覆盖原 dispatch，往后调用 dispatch 就会触发 chain 内的中间件链式串联执行
  40.       }
  41.     }
  42.   }
  43. }

最终返回的虽然还是 store 的那四个 API，但其中的 dispatch 函数的功能被增强了，这就是所谓的 Store Enhancer

⊙ 综合应用 ( 在线演示 )

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.   <script src="//cdn.bootcss.com/redux/3.5.2/redux.min.js"></script>
  5. </head>
  6. <body>
  7. <script>
  8. /** Action Creators */
  9. function inc() {
  10.   return { type: 'INCREMENT' };
  11. }
  12. function dec() {
  13.   return { type: 'DECREMENT' };
  14. }
  16. function reducer(state, action) {
  17.   state = state || { counter: 0 };
  19.   switch (action.type) {
  20.     case 'INCREMENT':
  21.       return { counter: state.counter + 1 };
  22.     case 'DECREMENT':
  23.       return { counter: state.counter - 1 };
  24.     default:
  25.       return state;
  26.   }
  27. }
  29. function printStateMiddleware(middlewareAPI) {
  30.   return function (dispatch) {
  31.     return function (action) {
  32.       console.log('dispatch 前：', middlewareAPI.getState());
  33.       var returnValue = dispatch(action);
  34.       console.log('dispatch 后：', middlewareAPI.getState(), '\n');
  35.       return returnValue;
  36.     };
  37.   };
  38. }
  40. var enhancedCreateStore = Redux.applyMiddleware(printStateMiddleware)(Redux.createStore);
  41. var store = enhancedCreateStore(reducer);
  43. store.dispatch(inc());
  44. store.dispatch(inc());
  45. store.dispatch(dec());
  46. </script>
  47. </body>
  48. </html>

控制台输出：

  1. dispatch 前：{ counter: 0 }
  2. dispatch 后：{ counter: 1 }
  4. dispatch 前：{ counter: 1 }
  5. dispatch 后：{ counter: 2 }
  7. dispatch 前：{ counter: 2 }
  8. dispatch 后：{ counter: 1 }

实际上，上面生成 store 的代码可以更加优雅：

  1. /** 本代码块记为 code-10 **/
  2. var store = Redux.createStore(
  3.   reducer,
  4.   Redux.applyMiddleware(printStateMiddleware)
  5. )

如果有多个中间件以及多个增强器，还可以这样写（请留意序号顺序）：

重温一下 createStore 完整的函数签名：function createStore(reducer, preloadedState, enhancer)

  1. /** 本代码块记为 code-11 **/
  2. import { createStore, applyMiddleware, compose } from 'redux'
  4. const store = createStore(
  5.   reducer,
  6.   preloadedState,    // 可选，前后端同构的数据同步
  7.   compose(           // 还记得吗？compose 是从右到左的哦！
  8.     applyMiddleware( // 这货也是 Store Enhancer 哦！但这是关乎中间件的增强器，必须置于 compose 执行链的最后
  9.       middleware1,
  10.       middleware2,
  11.       middleware3
  12.     ),
  13.     enhancer3,
  14.     enhancer2,
  15.     enhancer1
  16.   )
  17. )

为什么会支持那么多种写法呢？在 createStore 的源码分析的开头部分，我省略了一些代码，现在奉上该压轴部分：

  1. /** 本代码块记为 code-12 **/
  2. if (typeof preloadedState === 'function' && typeof enhancer === 'undefined') {
  3.   // 这里就是上面 code-10 的情况，只传入 reducer 和 Store Enhancer 这两个参数
  4.   enhancer = preloadedState
  5.   preloadedState = undefined
  6. }
  8. if (typeof enhancer !== 'undefined') {
  9.   if (typeof enhancer !== 'function') {
  10.     throw new Error('Expected the enhancer to be a function.')
  11.   }
  12.   // 存在 enhancer 就立即执行，返回增强版的 createStore <--------- 记为【锚点 12-1】
  13.   return enhancer(createStore)(reducer, preloadedState)
  14. }
  16. if (typeof reducer !== 'function') {
  17.   throw new Error('Expected the reducer to be a function.')
  18. }
  20. // 除 compose 外，createStore 竟然也在此为我们提供了书写的便利与自由度，实在是太体贴了

如果像 code-11 那样有多个 enhancer，则 code-12 【锚点 12-1】 中的代码会执行多次
生成最终的超级增强版 store。最后，奉上 code-11 中 compose 内部的执行顺序示意图：

  1. 原 createStore ————
  2.                   │
  3.                   ↓
  4. return enhancer1(createStore)(reducer, preloadedState, enhancer2)
  5.    |
  6.    ├———————→ createStore 增强版 1
  7.                     │
  8.                     ↓
  9. return enhancer2(createStore1)(reducer, preloadedState, enhancer3)
  10.    |
  11.    ├———————————→ createStore 增强版 1+2
  12.                         │
  13.                         ↓
  14. return enhancer3(createStore1+2)(reducer, preloadedState, applyMiddleware(m1,m2,m3))
  15.    |
  16.    ├————————————————————→ createStore 增强版 1+2+3
  17.                                      │
  18.                                      ↓
  19. return appleMiddleware(m1,m2,m3)(createStore1+2+3)(reducer, preloadedState)
  20.    |
  21.    ├——————————————————————————————————→ 生成最终增强版 store

§ 总结

Redux 有五个 API，分别是：

  • createStore(reducer, [initialState])
  • combineReducers(reducers)
  • applyMiddleware(...middlewares)
  • bindActionCreators(actionCreators, dispatch)
  • compose(...functions)

createStore 生成的 store 有四个 API，分别是：

  • getState()
  • dispatch(action)
  • subscribe(listener)
  • replaceReducer(nextReducer)

至此，若您已经理解上述 API 的作用机理，以及中间件与增强器的概念/区别
本人将不胜荣幸，不妨点个 star 算是对我的赞赏
如您对本教程有任何意见或改进的建议，欢迎 issue，我会尽快予您答复

最后奉上 React + Redux + React Router 的简易留言板实例：react-demo

拓展阅读：中间件的洋葱模型

tip