史上最全的 Redux 源码分析

前言

用 React + Redux 已经一段时间了，记得刚开始用Redux 的时候感觉非常绕，总搞不起里面的关系，如果大家用一段时间Redux又看了它的源码话，对你的理解会有很大的帮助。看完后，在回来看Redux，有一种 柳暗花明又一村 的感觉 .

源码

我分析的是用 es6 语法的源码，大家看目录结构，一共有 6 个问件。先说下各个文件大概功能。

• applyMiddlewar.js 使用自定义的 middleware 来扩展 Redux
• bindActionCreators.js 把 action creators 转成拥有同名 keys 的对象,使用时可以直接调用
• combineReducers.js 一个比较大的应用，需要对 reducer 函数 进行拆分，拆分后的每一块独立负责管理 state 的一部分
• compose.js 从右到左来组合多个函数，函数编程中常用到
• createStore.js 创建一个 Redux Store 来放所有的state
• utils/warnimng.js 控制台输出一个警告，我们可以不用看

我会按每个模块的重要性，去做分析，今天就先把 createStore .js 分享给大家.

createStore.js (每行代码都有注释，可以直接查看源代码)

本来我是把源代码都给贴出来，博客园给移除了首页，说代码注释太多，这我只能 简化一下, createStore 主要返回四个方法

• dispatch

用于action的分发——在createStore中可以用middleware中间件对dispatch进行改造，比如当action传入dispatch会立即触发reducer，有些时候我们不希望它立即触发，而是等待异步操作完成之后再触发，这时候用redux-thunk对dispatch进行改造，以前只能传入一个对象，改造完成后可以传入一个函数，在这个函数里我们手动dispatch一个action对象，这个过程是可控的，就实现了异步。

• subscribe

监听state的变化——这个函数在store调用dispatch时会注册一个listener监听state变化，当我们需要知道state是否变化时可以调用，它返回一个函数，调用这个返回的函数可以注销监听。 let unsubscribe = store.subscribe(() => {console.log('state发生了变化')})

• getState

获取store中的state——当我们用action触发reducer改变了state时，需要再拿到新的state里的数据。getState主要在两个地方需要用到，一是在dispatch拿到action后,store需要用它来获取state里的数据，并把这个数据传给reducer，这个过程是自动执行的，二是在我们利用subscribe监听到state发生变化后调用它来获取新的state数据，如果做到这一步，说明我们已经成功了。

• replaceReducer

替换reducer，改变state修改的逻辑。

结束语

代码已经放在 githunb 上，大家可以查看 更详细的源码 , 如果对你有帮助，请 Star 一下吧.