React：Redux源码分析

写在前面：

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

水平有限

希望各路大神批评指正

Redux要点回顾

Redux是什么？

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

Redux出现的动机？

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

Redux核心概念？

Store：保存应用程序State数据的地方；
Action：JS普通对象，用于描述一个事件以及必要参数，是改变 State 的唯一办法；
Reducer：纯函数，用于根据Action完成 State 状态的修改；
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绑定在一起的工具；

示例：