阅读 207

通过GitHub Blame深入分析Redux源码

『 文章首发于GitHub Blog

说明

本文所分析的Redux版本为3.7.2

分析直接写在了注释里,放在了GitHub上 —> 仓库地址

分析代码时通过查看Github blame,参考了Redux的issue及PR来分析各个函数的意图而不仅是从代码层面分析函数的作用,并且分析了很多细节层面上写法的原因,比如:

  1. dispatch: (...args) => dispatch(…args) 为什么不只传递一个 action ?

  2. listener 的调用为什么从 forEach 改成了 for ?

  3. 为什么在 reducer 的调用过程中不允许 dispatch(action) ?

    ...

水平有限,有写的不好或不对的地方请指出,欢迎留issue交流😆

文件结构

Redux的文件结构并不复杂,每个文件就是一个对外导出的函数,依赖很少,分析起来也比较容易,只要会用Redux基本上都能看懂本文。 这是Redux的目录结构:

.
├── applyMiddleware.js       将middleware串联起来生成一个更强大的dispatch函数,就是中间件的本质作用
├── bindActionCreators.js    把action creators转成拥有同名keys的对象
├── combineReducers.js       将多个reducer组合起来,每一个reducer独立管理自己对应的state
├── compose.js               将middleware从右向左依次调用,函数式编程中的常用方法,被applyMiddleware调用
├── createStore.js           最核心功能,创建一个store,包括实现了subscribe, unsubscribe, dispatch及state的储存
├── index.js                 对外export
└── utils                    一些小的辅助函数供其他的函数调用
   ├── actionTypes.js        redux内置的action,用来初始化initialState
   ├── isPlainObject.js      用来判断是否为单纯对象
   └── warning.js            报错提示

复制代码

源码分析

直接写在代码的注释里了,在每个函数上方也有大段的官方注释来解释每个函数的作用,中文翻译可以见Redux 中文文档

推荐源码的阅读顺序为:

index.js -> creatStore.js -> applyMiddleware.js (compose.js) -> combineReducers.js -> bindActionCreators.js
复制代码
关注下面的标签,发现更多相似文章
评论