不一样的redux源码解读

共计 8209 个字符，预计需要花费 21 分钟才能阅读完成。

1、本文不涉及 redux 的使用方法，因此可能更适合使用过 redux 的同学阅读 2、当前 redux 版本为 4.0.1
Redux 作为大型 React 应用状态管理最常用的工具。虽然在平时的工作中很多次的用到了它，但是一直没有对其原理进行研究。最近看了一下源码，下面是我自己的一些简单认识，如有疑问欢迎交流。

1.createStore

结合使用场景我们首先来看一下 createStore 方法。

以下源码为去除异常校验后的源码，

我们可以看到 creatorStore 方法除了返回我们常用的方法外，还做了一次初始化过程 dispatch({type: ActionTypes.INIT}); 那么 dispatch 干了什么事情呢？

这里 dispatch 主要做了二件事情

• 通过 reducer 更新 state

• 执行所有的监听函数，通知状态的变更

那么 reducer 是怎么改变 state 的呢？这就涉及到下面的 combineReducers 了

2、combineReducers

回到上面创建 store 的参数 reducers，

这里 reducer(previousStateForKey, action)执行的就是我们上面定义的 todos 和 filterStatus 方法。通过这二个 reducer 改变 state 值。
以前我一直很奇怪我们的 reducer 里的 state 是怎么做到取当前 reducer 对应的数据。看到 const previousStateForKey = state[key]这里我就明白了。
这里还有一个疑问点就是 combineReducers 的嵌套，最开始也我不明白，看了源码才知道 combineReducers（）=> combination(state = {}, action)，这里 combineReducers 返回的 combination 也是接受 (state = {}, action) 也就是一个 reducer 所以可以正常嵌套。

看到这初始化流程已经走完了。这个过程我们认识了 dispatch 和 combineReducers; 接下来我们来看一下我们自己要怎么更新数据。
用户更新数据时，是通过 createStore 后暴露出来的 dispatch 方法来触发的。dispatch 方法，是 store 对象提供的更改 currentState 这个闭包变量的唯一建议途径（注意这里是唯一建议途径，不是唯一途径，因为通过 getState 获取到的是 state 的引用，所以是可以直接修改的。但是这样就不能更新视图了）。正常情况下我们只需要像下面这样

也就是说 dispatch 接受一个包含 type 的对象。框架为我们提供了一个创建 Action 的方法 bindActionCreators

3.bindActionCreators

bindActionCreators 的作用就是使用 dispatch 把 action creator 包裹起来，这样我们就可以直接调用他们了。这个在平常开发中不常用。

4.applyMiddleware

可以看出 thunk 返回了一个接受 ({dispatch, getState}) 为参数的函数下面我们来看一下 applyMiddleware 源码分析

我第一眼看去一脸闷逼，咋这么复杂。但是静下心来看也就是一个三级柯里化的函数，我们从头来分析一下这个过程

也就是说，会变成这样

applyMiddleware(thunkMiddleware)(createStore)(reducer, preloadedState)
applyMiddleware(thunkMiddleware)
applyMiddleware 接收 thunkMiddleware 作为参数，返回形如 (createStore) => (…args) => {} 的函数。
applyMiddleware(thunkMiddleware)(createStore)
以 createStore 作为参数，调用上一步返回的函数 (…args) => {}
applyMiddleware(thunkMiddleware)(createStore)(reducer, preloadedState)
以（reducer, preloadedState）为参数进行调用。在这个函数内部，thunkMiddleware 被调用，其作用是监测 type 是 function 的 action
因此，如果 dispatch 的 action 返回的是一个 function，则证明是中间件，则将 (dispatch, getState) 作为参数代入其中，进行 action 内部下一步的操作。否则的话，认为只是一个普通的 action，将通过 next(也就是 dispatch)进一步分发

也就是说，applyMiddleware(thunkMiddleware)作为 enhance，最终起了这样的作用：
对 dispatch 调用的 action 进行检查，如果 action 在第一次调用之后返回的是 function，则将 (dispatch, getState) 作为参数注入到 action 返回的方法中，否则就正常对 action 进行分发，这样一来我们的中间件就完成喽~
因此，当 action 内部需要获取 state，或者需要进行异步操作，在操作完成之后进行事件调用分发的话，我们就可以让 action 返回一个以 (dispatch, getState) 为参数的 function 而不是通常的 Object，enhance 就会对其进行检测以便正确的处理
到此 redux 源码的主要部分讲完了，如有感兴趣的同学可以去看一下我没讲到的一些东西转送门 redux;