React：Redux源码分析

写在前面：

这是第一次写源码解析类文章

水平有限

希望各路大神批评指正

Redux要点回顾

Redux是什么？

Redux 是JavaScript 应用的状态管理容器，提供集中式、可预测的状态管理。

Redux出现的动机？

1. Web应用越来越复杂，需要管理的应用状态越来越多；
2. 应用的状态在什么时候，由于什么原因，如何变化已然不受控制；
3. 我们总是将两个难以理清的概念混淆在一起：变化和异步；

Redux核心概念？

1. Store：保存应用程序State数据的地方；
2. Action：JS普通对象，用于描述一个事件以及必要参数，是改变 State 的唯一办法；
3. Reducer：纯函数，用于根据Action完成 State 状态的修改；
4. Middleware：Action到达Reducer前需经过的“管道”，用于Action预处理（例：异步管理、日志记录）；

从网上盗的图...

Redux与React的关系？

Redux是一个独立的状态管理容器，本身与React没什么关系；如果想用Redux作为React应用的状态管理器，需要借助react-redux组件建立Redux与React间的联系

还是盗的图

OK，进入正题….

本文分析的源码是

目前Redux的最新发布版本

4.0.0

（网上那些多数是3.x版本

）

utils/isPlainObject.js:

工具函数，判断是否是简单对象（通过 {} 或 new Object构造的对象）；

utils/warning.js: 工具函数，用于向控制台打印警告信息； 这都不是重点..

utils/actionTypes.js: 供Redux内部使用的2个Action常量定义；

applyMiddleware.js: Redux官方附带一个的Store增强器，用于扩展、增强Store的dispatch函数功能（例：日志记录[redux-logger]、异步管理[redux-thunk、redux-promise、redux-saga]等...）; compoese.js: 函数式编程的经典案例，用于从左到右组合函数；applyMiddleware内部使用compose串联多个middleware组件；如果我们需要用到多个Store增强器，也需要借助compose进行合并、串联； combineReducers.js: 稍微复杂点的应用就不可能只写一个Reducer，它能帮助我们将一堆小Reducer合并为一个大Reducer； bindActionCreators.js: 函数式编程的又一范例，用于组合dispatch和actionCreators，看后面的例子就知道了.. createStore.js: Redux的核心了...

index.js: Redux项目入口，定义了Redux的外部接口；

1. index.js

先从入口开始....

index.js是redux统一导出对外的接口的地方，包含：

• createStore
• combineReducers
• bindActionCreators
• applyMiddleware
• compose

注：在index.js中统一导出分散在各目录中的子模块，这样使用者无论需要用到什么模块，只需从统一的位置import，无需记忆各子模块的实际位置；值得借鉴；

2. utils/isPlainObject.js

3. utils/warning.js

非重点内容，热热身...

util/isPlainObject.js:

判定一个JS对象是不是PlainObject；

util/warning.js:

向控制台输出警告信息的工具类；

4. createStore.js

5. bindActionCreators.js

6. utils/actionTypes.js

看一个Redux小例子

回顾一下Redux核心工作流

4.1. bindActionCreators.js：

store.dispatch( actionCreator(...) )是我们向Redux发送Action的一般方式，但这要求我们未来在发送Action时，既要引用到store对象又要引用actionCreator，耦合度高；bindActionCreators就是把store.dispatch与actionCreator绑定在一起的工具；

示例：

源码：

4.2. createStore.js：

顾名思义，创建Store用的，Redux核心模块；

4.3. utils/actionTypes.js：

定义了2个Redux内部使用的Action常量，用于在Redux初始化或替换Reducer时完成Store初值构建；

7. combineReducers.js

对于Redux应用来说，只有一个Store、也只有一个Reducer；但随着应用变得越来越复杂，我们需要对 reducer 函数进行拆分，拆分后的每一块独立负责管理 state 的一部分；

示例：

源码：

8. applyMiddleware.js

9. compose.js

8.1 compose.js:

compose实际上是一个函数式编程中的写法，表示从右向左组合多个函数。compose被appliMiddleware.js内部用于组合多个middleware组件；

8.2 applyMiddleware.js:

applyMiddleware是Redux官方附带的一个Store增强器；

回顾一下createStore的接口：

再看一个应用applyMiddleware的示例：

源码：

最后再贴一张middleware中next与dispatch间的关系图：

限于篇幅

我只写了我认为是重点的内容

貌似比较凌乱

欢迎大家留言讨论

参考：

《深入React技术栈》 https://github.com/reduxjs/redux https://github.com/reduxjs/redux-thunk https://github.com/evgenyrodionov/redux-logger