摘要：的存在是為了避免在執(zhí)行過程中，發(fā)生改變，導致錯誤。保證的修改不會影響。在內部關鍵代碼是第一行用來調用，并將執(zhí)行的結果賦給。符合這個標準的會被放入中。以上基本是的全部關鍵代碼剖析，簡單而強大。

前面寫了《React組件性能優(yōu)化》《Redux性能優(yōu)化》《React-Redux性能優(yōu)化》，但是都沒有從這些框架的實現(xiàn)上講為什么？這次就從源碼上來分析一下這些框架的實現(xiàn)原理，以更深入的理解這些框架，并更好的使用它們。

Redux的api很簡單，下面一個一個的分析。

首先說下它的三個參數(shù)reducer、preloadedState、enhancer。reducer是唯一必傳的參數(shù)，它很重要，因為它決定了整個state。preloadedState就是state的初始值。第三個參數(shù)不是特別常用，它是個函數(shù)，如果它存在的情況下，會執(zhí)行下面的語句：

enhancer(createStore)(reducer, preloadedState)

很顯然enhancer和middleware作用很像，用來增強store。

createStore內部維護了currentReducer（當前的reducer）和currentState（當前的state），初始化的時候：

currentReducer ＝ reducer
currentState ＝ preloadedState

這兩個變量很重要，因為很多操作都和它們相關。

在createStore內部維護了兩個數(shù)組currentListeners、nextListeners。nextListeners的存在是為了避免在listeners執(zhí)行過程中，listeners發(fā)生改變，導致錯誤。listeners的添加或刪除都是對nextListeners進行操作的。

nextListeners = currentListeners.slice()

保證nextListeners的修改不會影響currentListeners。

subscribe(listener)的返回值是個函數(shù)，執(zhí)行這個函數(shù)就會unsubscribe(listener)，取消監(jiān)聽。

很重要，因為只能通過它修改state，它只接收一個參數(shù)action，action必須是簡單對象，而且必須有type屬性。在dispatch內部關鍵代碼是：

currentState = currentReducer(currentState, action)

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

第一行用來調用reducer，并將執(zhí)行的結果賦給currentState。這樣currentState中的數(shù)據(jù)就總是最新的，即reducer處理完action之后返回的數(shù)據(jù)。沒有條件，執(zhí)行dispatch后reducer總會執(zhí)行。

后面3行代碼是用來調用subscribe傳進來的listeners，按順序執(zhí)行它們，沒有任何條件判斷，也就是說只要執(zhí)行dispatch，所有的listeners都會執(zhí)行，不管state有沒有發(fā)生改變，而且listeners執(zhí)行的時候是沒參數(shù)的。

Redux內部有個變量

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

在創(chuàng)建store（即調用createStore(reducer, preloadedState, enhancer)）的時候會執(zhí)行

dispatch({ type: ActionTypes.INIT })

所以reducer和listeners在store創(chuàng)建的時候都會被執(zhí)行一遍，listeners沒有什么特別要關注的。reducer執(zhí)行必須關注，因為它的執(zhí)行結果影響你的數(shù)據(jù)。比如createStore的時候你沒有傳入preloadedState，在reducer內的state有默認參數(shù)，正常情況下你的reducer會使用default分支處理這個action，而且一般default分支會直接返回state，所以這種情況下store創(chuàng)建完后，使用getState()獲取的值就是默認參數(shù)組成的state。

獲取store中的state，很簡單，主要代碼：

return currentState

在沒有dispatch正在執(zhí)行的情況下，直接返回前面說很重要的currentState。

參數(shù)是nextReducer,也很簡單，關鍵代碼：

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

直接拿nextReducer替換掉前面說很重要的currentReducer，后面再執(zhí)行dispatch，action就會被nextReducer處理，處理的結果賦值給currentState。替換之后會執(zhí)行一遍初始化action。

代碼雖然看起來很長，但是大多都是用來處理校驗reducer的。它接收的參數(shù)reducers是個對象，對象的value不能是undefined，必須是function。符合這個標準的reducer會被放入finalReducers中。
然后再對finalReducers進行校驗，reducer必須有default處理，不能處理Redux內部的action type，比如@@redux/INIT。然后返回一個函數(shù)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，然后把返回的數(shù)據(jù)組裝到state的對應位置，很巧妙！

它接收兩個參數(shù)actionCreators和dispatch。如果actionCreators是函數(shù)，就直接返回：

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

直接給這個返回的函數(shù)傳actionCreator的參數(shù)就可以直接觸發(fā)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的處理是一樣的。

一個可以被執(zhí)行三次的柯里化函數(shù)，代碼雖然簡單，但是給Redux帶來卻是無限可能。它的第一次執(zhí)行的時候參數(shù)是一系列的middlewares，第二次執(zhí)行參數(shù)是createStore，返回的是一個和createStore接收同樣參數(shù)的函數(shù)，再次被執(zhí)行的話，就會返回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簡單而強大。