摘要：的存在是為了避免在執(zhí)行過程中，發(fā)生改變，導(dǎo)致錯(cuò)誤。保證的修改不會(huì)影響。在內(nèi)部關(guān)鍵代碼是第一行用來調(diào)用，并將執(zhí)行的結(jié)果賦給。符合這個(gè)標(biāo)準(zhǔn)的會(huì)被放入中。以上基本是的全部關(guān)鍵代碼剖析，簡單而強(qiáng)大。

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

Redux的api很簡單，下面一個(gè)一個(gè)的分析。

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

enhancer(createStore)(reducer, preloadedState)

很顯然enhancer和middleware作用很像，用來增強(qiáng)store。

createStore內(nèi)部維護(hù)了currentReducer（當(dāng)前的reducer）和currentState（當(dāng)前的state），初始化的時(shí)候：

currentReducer ＝ reducer
currentState ＝ preloadedState

這兩個(gè)變量很重要，因?yàn)楹芏嗖僮鞫己退鼈兿嚓P(guān)。

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

nextListeners = currentListeners.slice()

保證nextListeners的修改不會(huì)影響currentListeners。

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

很重要，因?yàn)橹荒芡ㄟ^它修改state，它只接收一個(gè)參數(shù)action，action必須是簡單對象，而且必須有type屬性。在dispatch內(nèi)部關(guān)鍵代碼是：

currentState = currentReducer(currentState, action)

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

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

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

Redux內(nèi)部有個(gè)變量

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

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

dispatch({ type: ActionTypes.INIT })

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

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

return currentState

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

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

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

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

代碼雖然看起來很長，但是大多都是用來處理校驗(yàn)reducer的。它接收的參數(shù)reducers是個(gè)對象，對象的value不能是undefined，必須是function。符合這個(gè)標(biāo)準(zhǔn)的reducer會(huì)被放入finalReducers中。
然后再對finalReducers進(jìn)行校驗(yàn)，reducer必須有default處理，不能處理Redux內(nèi)部的action type，比如@@redux/INIT。然后返回一個(gè)函數(shù)combination(state = {}, action)，它也是一個(gè)reducer，可以被再次和其他reducer combine。一般combination等同于currentReducer，它的返回結(jié)果會(huì)賦給state，combination的關(guān)鍵代碼如下：

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返回結(jié)果的校驗(yàn)。reducer就是通過這種方式從state中拿到對應(yīng)的state，然后把返回的數(shù)據(jù)組裝到state的對應(yīng)位置，很巧妙！

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

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

直接給這個(gè)返回的函數(shù)傳actionCreator的參數(shù)就可以直接觸發(fā)dispatch，這也是bindActionCreators的目的，簡化操作，弱化dispatch的存在感。
如果actionCreators是個(gè)對象會(huì)進(jìn)行另外的操作，返回一個(gè)對象，下面是關(guān)鍵代碼。

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

其實(shí)里面的處理和單個(gè)function的處理是一樣的。

一個(gè)可以被執(zhí)行三次的柯里化函數(shù)，代碼雖然簡單，但是給Redux帶來卻是無限可能。它的第一次執(zhí)行的時(shí)候參數(shù)是一系列的middlewares，第二次執(zhí)行參數(shù)是createStore，返回的是一個(gè)和createStore接收同樣參數(shù)的函數(shù)，再次被執(zhí)行的話，就會(huì)返回dispatch強(qiáng)化之后的store。關(guān)鍵代碼如下：

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))

這里只寫了多個(gè)middleware的情況，單個(gè)middlewares更簡單。代碼很簡單，邏輯也很簡單，作用很大。比如使用thunk可以做異步action。

以上基本是Redux的全部關(guān)鍵代碼剖析，Redux簡單而強(qiáng)大。