Redux源码剖析

前面写了《React组件性能优化》《Redux性能优化》《React-Redux性能优化》，可是都没有从这些框架的实现上讲为何？此次就从源码上来分析一下这些框架的实现原理，以更深刻的理解这些框架，并更好的使用它们。

Redux的api很简单，下面一个一个的分析。

createStore

首先说下它的三个参数reducer、preloadedState、enhancer。reducer是惟一必传的参数，它很重要，由于它决定了整个state。preloadedState就是state的初始值。第三个参数不是特别经常使用，它是个函数，若是它存在的状况下，会执行下面的语句：

enhancer(createStore)(reducer, preloadedState)

很显然enhancer和middleware做用很像，用来加强store。

createStore内部维护了currentReducer（当前的reducer）和currentState（当前的state），初始化的时候：

currentReducer ＝ reducer
currentState ＝ preloadedState

这两个变量很重要，由于不少操做都和它们相关。

subscribe

在createStore内部维护了两个数组currentListeners、nextListeners。nextListeners的存在是为了不在listeners执行过程当中，listeners发生改变，致使错误。listeners的添加或删除都是对nextListeners进行操做的。

nextListeners = currentListeners.slice()

保证nextListeners的修改不会影响currentListeners。

subscribe(listener)的返回值是个函数，执行这个函数就会unsubscribe(listener)，取消监听。

dispatch

很重要，由于只能经过它修改state，它只接收一个参数action，action必须是简单对象，并且必须有type属性。在dispatch内部关键代码是：

currentState = currentReducer(currentState, action)

var listeners = currentListeners = nextListeners
for (var i = 0; i < listeners.length; i++) {
  listeners[i]()
}

第一行用来调用reducer，并将执行的结果赋给currentState。这样currentState中的数据就老是最新的，即reducer处理完action以后返回的数据。没有条件，执行dispatch后reducer总会执行。

后面3行代码是用来调用subscribe传进来的listeners，按顺序执行它们，没有任何条件判断，也就是说只要执行dispatch，全部的listeners都会执行，无论state有没有发生改变，并且listeners执行的时候是没参数的。

Redux内部有个变量

ActionTypes = {
  INIT: '@@redux/INIT'
}

在建立store（即调用createStore(reducer, preloadedState, enhancer)）的时候会执行

dispatch({ type: ActionTypes.INIT })

因此reducer和listeners在store建立的时候都会被执行一遍，listeners没有什么特别要关注的。reducer执行必须关注，由于它的执行结果影响你的数据。好比createStore的时候你没有传入preloadedState，在reducer内的state有默认参数，正常状况下你的reducer会使用default分支处理这个action，并且通常default分支会直接返回state，因此这种状况下store建立完后，使用getState()获取的值就是默认参数组成的state。

getState

获取store中的state，很简单，主要代码：

return currentState

在没有dispatch正在执行的状况下，直接返回前面说很重要的currentState。

replaceReducer

参数是nextReducer,也很简单，关键代码：

currentReducer = nextReducer
dispatch({ type: ActionTypes.INIT })

直接拿nextReducer替换掉前面说很重要的currentReducer，后面再执行dispatch，action就会被nextReducer处理，处理的结果赋值给currentState。替换以后会执行一遍初始化action。

combineReducers

代码虽然看起来很长，可是大多都是用来处理校验reducer的。它接收的参数reducers是个对象，对象的value不能是undefined，必须是function。符合这个标准的reducer会被放入finalReducers中。
而后再对finalReducers进行校验，reducer必须有default处理，不能处理Redux内部的action type，好比@@redux/INIT。而后返回一个函数combination(state = {}, action)，它也是一个reducer，能够被再次和其余reducer combine。通常combination等同于currentReducer，它的返回结果会赋给state，combination的关键代码以下：

var finalReducerKeys = Object.keys(finalReducers)
var hasChanged = false
var nextState = {}
for (var i = 0; i < finalReducerKeys.length; i++) {
    var key = finalReducerKeys[i]
    var reducer = finalReducers[key]
    var previousStateForKey = state[key]
    var nextStateForKey = reducer(previousStateForKey, action)
    nextState[key] = nextStateForKey
    hasChanged = hasChanged || nextStateForKey !== previousStateForKey
}
return hasChanged ? nextState : state

中间省略了reducer返回结果的校验。reducer就是经过这种方式从state中拿到对应的state，而后把返回的数据组装到state的对应位置，很巧妙！

bindActionCreators

它接收两个参数actionCreators和dispatch。若是actionCreators是函数，就直接返回：

(...args) => dispatch(actionCreator(...args))

直接给这个返回的函数传actionCreator的参数就能够直接触发dispatch，这也是bindActionCreators的目的，简化操做，弱化dispatch的存在感。
若是actionCreators是个对象会进行另外的操做，返回一个对象，下面是关键代码。

var keys = Object.keys(actionCreators)
var boundActionCreators = {}
for (var i = 0; i < keys.length; i++) {
    var key = keys[i]
    var actionCreator = actionCreators[key]
      boundActionCreators[key] = (...args) => dispatch(actionCreator(...args))
}
return boundActionCreators

其实里面的处理和单个function的处理是同样的。

applyMiddleware

一个能够被执行三次的柯里化函数，代码虽然简单，可是给Redux带来倒是无限可能。它的第一次执行的时候参数是一系列的middlewares，第二次执行参数是createStore，返回的是一个和createStore接收一样参数的函数，再次被执行的话，就会返回dispatch强化以后的store。关键代码以下：

var middlewareAPI = {
  getState: store.getState,
  dispatch: (action) => dispatch(action)
}
chain = middlewares.map(middleware => middleware(middlewareAPI))
const last = chain[funcs.length - 1]
const rest = chain.slice(0, -1)
dispatch = rest.reduceRight((composed, f) => f(composed), last(store.dispatch))

这里只写了多个middleware的状况，单个middlewares更简单。代码很简单，逻辑也很简单，做用很大。好比使用thunk能够作异步action。

以上基本是Redux的所有关键代码剖析，Redux简单而强大。