Redux 源码解读

前言

Redux 是什么？

前端页面需要按照数据来渲染内容，当页面上有比较多的交互时，比如用户的点击触发了数据的变化，此时为了保证展示的内容和数据一致，就要同时去更新页面上展示这些数据的视图/组件。这些数据就是所谓的“状态”，当状态和状态的变化很复杂时，依靠手动更新视图也会很复杂，因此通常需要一个管理状态的工具，帮助我们管理这些状态，在状态发生变化的时候，去自动地通知视图/组件，让视图/组件更新。Redux 就是这样的一个状态管理工具，按照官网的描述，“Redux 是一个供 JavaScript 应用使用的可预测状态的容器”，也就是说 Redux 可以帮助我们管理前端应用的状态，并让它能够符合我们的预期。

那么 Redux 是如何使状态可预测的呢？

1. Redux 将前端所有的状态保存在一棵全局唯一的状态树中：保证状态的唯一，避免出现各个地方不一致的情况；
2. 状态树是只读的，不能直接进行修改：如果直接修改状态树，那么依赖这些状态的视图/组件就无法知道状态改变了，也就无法更新；
3. 通过 dispatch 一个 action 来改变状态，用纯函数来改变状态树：用特定的方式触发状态的变化，执行纯函数来改变状态，没有副作用，使效果可预期，并且能够让 Redux 在状态改变时，通知所有依赖的视图元素/组件去进行更新。

基本信息

• 基于 Redux 4.1.0 版本
• 源码共 475 行，JavaScript 编写
• 目录结构，主要关注src文件夹：

src
├── applyMiddleware.js
├── bindActionCreators.js
├── combineReducers.js
├── compose.js
├── createStore.js
├── index.js
└── utils
      ├── actionTypes.js
      ├── formatProdErrorMessage.js
      ├── isPlainObject.js
      ├── kindOf.js
      ├── symbol-observable.js
      └── warning.js

可以看到，Redux 的源码相当精简，结构也很简单，基本上是按照功能划分成为了若干个模块：

• index 是入口，将 redux 的若干功能导出；
• createStore 中包含了 Redux 的核心功能，主要包含了全局状态树的创建、分发 action 以及订阅发布的功能；
• applyMiddleware 用于创建中间件模型，增强 store 的功能；
• combineReducers 用于将从多个 reducer 合并创建一个状态树，便于分别进行管理；
• 剩下的几个模块都是工具性质的模块。

接下来分别对每个模块进行详细解读。