Redux 源码分析

环境说明

redux版本：4.0.0
redux官网：redux.js.org/
redux仓库：github.com/reduxjs/red…
redux视频：egghead.io/courses/get…
redux示例：redux.js.org/introductio…

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间的联系

redux源码分析

文件整体结构分析

• 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的外部接口；

index.js

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

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

utils/isPlainObject.js

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

utils/warning.js

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

进入重头戏之前先来看一个Redux小例子回顾一下Redux核心工作流

bindActionCreators.js

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

源码：

createStore.js

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

utils/actionTypes.js：

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

combineReducers.js

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

源码：

compose.js:

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

applyMiddleware.js:

applyMiddleware是Redux官方附带的一个Store增强器；
回顾一下createStore的接口：

再看一个应用applyMiddleware的示例：

源码：

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

参考资料：

《深入React技术栈》
github.com/reduxjs/red…
github.com/reduxjs/red…
github.com/evgenyrodio…

社区以及公众号发布的文章，100%保证是我们的原创文章，如果有错误，欢迎大家指正。

文章首发在WebJ2EE公众号上，欢迎大家关注一波，让我们大家一起学前端~~~

再来一波号外，我们成立WebJ2EE公众号前端吹水群，大家不管是看文章还是在工作中前端方面有任何问题，我们都可以在群内互相探讨，希望能够用我们的经验帮更多的小伙伴解决工作和学习上的困惑,欢迎加入。