史上最全的 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 一下吧.