Redux源码简析

Redux核心概念

单一 store ，只能挺过getState()获取状态，不能直接修改
只能通过触发 action 修改状态
使用纯函数 reducers 描述action如何改变state

整个redux的实现就是围绕上面的这三点进行实现的，整个源码量不大，理解了核心概念后去看源码会发现源码的结构逻辑非常清晰，代码中的注释也非常全面，本篇文章会按照如何实现核心概念的方式去阅读源码。(默认你已经会使用redux了)

Reducer

我们首先来看 reducer 在 redux中的使用来更加深入理解reducer的作用

currentState = currentReducer(currentState, action)

这是 redux 中唯一使用到 reducer 的地方，在dispatch函数中，将旧的state和dispatch的action传入得到新的state，这和redux对于reducer的描述是一模一样的，所以我们在编写 reducer 函数的时候一定要严格遵循redux的规范写成纯函数，这样可以保证你的state变化可以被方便的追踪到。

Action

我们所有的action都要通过 dispatch 所以我们直接来看dispatch的实现，比较有意思的就是redux内其实是有一把同步锁 isDispatching ，这样的做法避免掉了很多处理并发的逻辑，例如并发会带来读脏数据的风险，在看源码之前是根本不知道redux有这样的一个设计的。

function dispatch(action) {// 省略了一些错误aciton的检测代码 总结下来就是aciton一定是对象并且有type属性// isDispatching 类似于同步锁，保证每次修改state的原子性if (isDispatching) {throw new Error('Reducers may not dispatch actions.')}try {isDispatching = true//获取新的statecurrentState = currentReducer(currentState, action)} finally {//开锁isDispatching = false}//通知订阅的函数const listeners = (currentListeners = nextListeners)for (let i = 0; i < listeners.length; i  ) {const listener = listeners[i]listener()}return action}

Store

redux最重要的部分就是createStore，他将存储state，把reducer和action组合在一起。

// 接收 reducer 初始state applyMiddleware添加中间件后返回的函数
export default function createStore(reducer, preloadedState, enhancer) {// 解决我们不传 preloadedState 第二个参数是 enhancer 的情况if (typeof preloadedState === 'function' && typeof enhancer === 'undefined') {enhancer = preloadedStatepreloadedState = undefined}if (typeof enhancer !== 'undefined') {if (typeof enhancer !== 'function') {throw new Error('Expected the enhancer to be a function.')}// 在 applyMiddleware 中enhancer做的事情就是添加中间件增强dispatch的能力return enhancer(createStore)(reducer, preloadedState)}if (typeof reducer !== 'function') {throw new Error('Expected the reducer to be a function.')}//store中的转态let currentReducer = reducer//我们的state树let currentState = preloadedStatelet currentListeners = []let nextListeners = currentListenerslet isDispatching = false...//返回 store对象以及apireturn {//触发aciton使用dispatch,//添加state改变的回调使用subscribe,//获取 stategetState,//替换 reducerreplaceReducer,[$$observable]: observable}