摘要：訂閱器不應(yīng)該關(guān)注所有的變化，在訂閱器被調(diào)用之前，往往由于嵌套的導(dǎo)致發(fā)生多次的改變，我們應(yīng)該保證所有的監(jiān)聽(tīng)都注冊(cè)在之前。

用 React + Redux 已經(jīng)一段時(shí)間了，記得剛開(kāi)始用Redux 的時(shí)候感覺(jué)非常繞，總搞不起里面的關(guān)系，如果大家用一段時(shí)間Redux又看了它的源碼話，對(duì)你的理解會(huì)有很大的幫助。看完后，在回來(lái)看Redux，有一種 柳暗花明又一村 的感覺(jué) ，.

我分析的是用 es6 語(yǔ)法的源碼，大家看目錄結(jié)構(gòu)，一共有 6 個(gè)問(wèn)件。先說(shuō)下各個(gè)文件大概功能。

applyMiddlewar.js 使用自定義的 middleware 來(lái)擴(kuò)展 Redux

bindActionCreators.js 把 action creators 轉(zhuǎn)成擁有同名 keys 的對(duì)象,使用時(shí)可以直接調(diào)用

combineReducers.js 一個(gè)比較大的應(yīng)用，需要對(duì) reducer 函數(shù) 進(jìn)行拆分，拆分后的每一塊獨(dú)立負(fù)責(zé)管理 state 的一部分

compose.js 從右到左來(lái)組合多個(gè)函數(shù)，函數(shù)編程中常用到

createStore.js 創(chuàng)建一個(gè) Redux Store 來(lái)放所有的state

utils/warnimng.js 控制臺(tái)輸出一個(gè)警告，我們可以不用看

我會(huì)按每個(gè)模塊的重要性，去做分析，今天就先把 createStore .js 分享給大家.

注釋很詳細(xì)，直接看注釋就可以了

// 導(dǎo)入 lodash ，判斷是否是普通(plain)對(duì)象
import isPlainObject from "lodash/isPlainObject"
//導(dǎo)入 symbol 類型的 observable (symbol類型的屬性，是對(duì)象的私有屬性)
import $$observable from "symbol-observable"

/**
 *定義 Redux Action 的初始化 type
 * 
 */
export var ActionTypes = {
  INIT: "@@redux/INIT"
}

/**
 * 創(chuàng)建一個(gè)Redux store來(lái)存放應(yīng)用所有的 state。應(yīng)用中有且只有一個(gè)store
 *
 * @param {Function} reducer 是一個(gè)函數(shù),接收兩個(gè)參數(shù)，分別是當(dāng)前的 state 樹(shù)和
 * 要處理的 action，返回新的 state 樹(shù)
 *
 * @param {any} 初始化時(shí)的state ,在應(yīng)用中，你可以把服務(wù)端傳來(lái)經(jīng)過(guò)處理后的 state
 *傳給它。如果你使用 combineReducers 創(chuàng)建 reducer，它必須是一個(gè)普通對(duì)象，與傳入
 *的 keys 保持同樣的結(jié)構(gòu)。否則，你可以自由傳入任何 reducer 可理解的內(nèi)容。
 *
 * @param {Function} enhancer 是一個(gè)組合的高階函數(shù)，返回一個(gè)強(qiáng)化過(guò)的 store creator .
 *                  這與 middleware相似，它也允許你通過(guò)復(fù)合函數(shù)改變 store 接口。
 *
 * @returns {Store} 返回一個(gè)對(duì)象，給外部提供 dispatch, getState, subscribe, replaceReducer, 
 */
export default function createStore(reducer, preloadedState, enhancer) {

  //判斷 preloadedState 是一個(gè)函數(shù)并且 enhancer 是未定義 
  if (typeof preloadedState === "function" && typeof enhancer === "undefined") {
    enhancer = preloadedState  // 把 preloadedState 賦值給 enhancer
    preloadedState = undefined // 把 preloadedState 賦值為 undefined
  }

  //判斷 enhancer 不是 undefined
  if (typeof enhancer !== "undefined") {
    //判斷 enhancer 不是一個(gè)函數(shù)
    if (typeof enhancer !== "function") {
      //拋出一個(gè)異常 (enhancer 必須是一個(gè)函數(shù))
      throw new Error("Expected the enhancer to be a function.")
    }
    //調(diào)用 enhancer ,返回一個(gè)新強(qiáng)化過(guò)的 store creator
    return enhancer(createStore)(reducer, preloadedState)
  }
  
  //判斷 reducer 不是一個(gè)函數(shù)
  if (typeof reducer !== "function") {
    //拋出一個(gè)異常 (reducer 必須是一個(gè)函數(shù))
    throw new Error("Expected the reducer to be a function.")
  }

  
  var currentReducer = reducer        //把 reducer 賦值給 currentReducer
  var currentState = preloadedState   //把 preloadedState 賦值給 currentState
  var currentListeners = []           //初始化 listeners 數(shù)組
  var nextListeners = currentListeners//nextListeners 和 currentListeners 指向同一個(gè)引用
  var isDispatching = false           //標(biāo)記正在進(jìn)行dispatch

  /**
   * 保存一份訂閱快照
   * @return {void}
   */
  function ensureCanMutateNextListeners() {
    //判斷 nextListeners 和 currentListeners 是同一個(gè)引用
    if (nextListeners === currentListeners) {
      
      //通過(guò)數(shù)組的 slice 方法,復(fù)制出一個(gè) listeners ,賦值給 nextListeners
      nextListeners = currentListeners.slice()
    }
  }

  /**
   * 獲取 store 里的當(dāng)前 state tree
   *
   * @returns {any} 返回應(yīng)用中當(dāng)前的state tree
   */
  function getState() {

    //當(dāng)前的state tree
    return currentState
  }

  /**
   *
   * 添加一個(gè) listener . 當(dāng) dispatch action 的時(shí)候執(zhí)行，這時(shí) sate 已經(jīng)發(fā)生了一些變化，
   * 你可以在 listener 函數(shù)調(diào)用 getState() 方法獲取當(dāng)前的 state
   *
   * 你可以在 listener 改變的時(shí)候調(diào)用 dispatch ，要注意
   *
   * 1. 訂閱器（subscriptions） 在每次 dispatch() 調(diào)用之前都會(huì)保存一份快照。
   *    當(dāng)你在正在調(diào)用監(jiān)聽(tīng)器（listener）的時(shí)候訂閱(subscribe)或者去掉訂閱（unsubscribe），
   *    對(duì)當(dāng)前的 dispatch() 不會(huì)有任何影響。但是對(duì)于下一次的 dispatch()，無(wú)論嵌套與否，
   *    都會(huì)使用訂閱列表里最近的一次快照。
   *
   * 2. 訂閱器不應(yīng)該關(guān)注所有 state 的變化，在訂閱器被調(diào)用之前，往往由于嵌套的 dispatch()
   *    導(dǎo)致 state 發(fā)生多次的改變，我們應(yīng)該保證所有的監(jiān)聽(tīng)都注冊(cè)在 dispath() 之前。
   *
   * @param {Function} 要監(jiān)聽(tīng)的函數(shù)
   * @returns {Function} 一個(gè)可以移除監(jiān)聽(tīng)的函數(shù)
   */
  function subscribe(listener) {
    //判斷 listener 不是一個(gè)函數(shù)
    if (typeof listener !== "function") {

      //拋出一個(gè)異常 (listener 必須是一個(gè)函數(shù))
      throw new Error("Expected listener to be a function.")
    }

    //標(biāo)記有訂閱的 listener
    var isSubscribed = true

    //保存一份快照
    ensureCanMutateNextListeners()

    //添加一個(gè)訂閱函數(shù)
    nextListeners.push(listener)
    
    //返回一個(gè)取消訂閱的函數(shù)
    return function unsubscribe() {

      //判斷沒(méi)有訂閱一個(gè) listener
      if (!isSubscribed) {

        //調(diào)用 unsubscribe 方法的時(shí)候，直接 return
        return
      }

      //標(biāo)記現(xiàn)在沒(méi)有一個(gè)訂閱的 listener
      isSubscribed = false
      
      //保存一下訂閱快照
      ensureCanMutateNextListeners()
      //找到當(dāng)前的 listener
      var index = nextListeners.indexOf(listener)
      //移除當(dāng)前的 listener
      nextListeners.splice(index, 1)
    }
  }

  /**
   * dispath action。這是觸發(fā) state 變化的惟一途徑。
   * 
   * @param {Object} 一個(gè)普通(plain)的對(duì)象，對(duì)象當(dāng)中必須有 type 屬性
   *
   * @returns {Object} 返回 dispatch 的 action
   *
   * 注意: 如果你要用自定義的中間件， 它可能包裝 `dispatch()`
   *       返回一些其它東西，如( Promise )
   */
  function dispatch(action) {
    //判斷 action 不是普通對(duì)象。也就是說(shuō)該對(duì)象由 Object 構(gòu)造函數(shù)創(chuàng)建
    if (!isPlainObject(action)) {

      //拋出一個(gè)異常(actions 必須是一個(gè)普通對(duì)象. 或者用自定義的中間件來(lái)處理異步 actions)
      throw new Error(
        "Actions must be plain objects. " +
        "Use custom middleware for async actions."
      )
    }

    // 判斷 action 對(duì)象的 type 屬性等于 undefined 
    if (typeof action.type === "undefined") {

      //拋出一個(gè)異常
      throw new Error(
        "Actions may not have an undefined "type" property. " +
        "Have you misspelled a constant?"
      )
    }
  
    //判斷 dispahch 正在運(yùn)行，Reducer在處理的時(shí)候又要執(zhí)行 dispatch
    if (isDispatching) {
      
      //拋出一個(gè)異常(Reducer在處理的時(shí)候不能 dispatch action)
      throw new Error("Reducers may not dispatch actions.")
    }

    try {

      //標(biāo)記 dispatch 正在運(yùn)行
      isDispatching = true

      //執(zhí)行當(dāng)前 Reducer 函數(shù)返回新的 state
      currentState = currentReducer(currentState, action)

    } finally { // (try catch) 最終會(huì)被執(zhí)行的地方

      //標(biāo)記 dispatch 沒(méi)有在運(yùn)行 
      isDispatching = false
    }

    //所有的的監(jiān)聽(tīng)函數(shù)賦值給 listeners
    var listeners = currentListeners = nextListeners

    //遍歷所有的監(jiān)聽(tīng)函數(shù)
    for (var i = 0; i < listeners.length; i++) {

      // 執(zhí)行每一個(gè)監(jiān)聽(tīng)函數(shù)
      listeners[i]()
    }

    //返回傳入的 action 對(duì)象
    return action
  }

  /**
   * 替換計(jì)算 state 的 reducer。
   *
   * 這是一個(gè)高級(jí) API。
   * 只有在你需要實(shí)現(xiàn)代碼分隔，而且需要立即加載一些 reducer 的時(shí)候才可能會(huì)用到它。
   * 在實(shí)現(xiàn) Redux 熱加載機(jī)制的時(shí)候也可能會(huì)用到。
   *
   * @param {Function} store 要用的下一個(gè) reducer.
   * @returns {void}
   */
  function replaceReducer(nextReducer) {

    //判斷 nextReducer 不是一個(gè)函數(shù)
    if (typeof nextReducer !== "function") {

      //拋出一個(gè)異常 (nextReducer必須是一個(gè)函數(shù))
      throw new Error("Expected the nextReducer to be a function.")
    }

    //當(dāng)前傳入的 nextReducer 賦值給 currentReducer
    currentReducer = nextReducer

    //調(diào)用 dispatch 函數(shù)，傳入默認(rèn)的 action
    dispatch({ type: ActionTypes.INIT })
  }

  /**
   *  在 creatorStore 內(nèi)部沒(méi)有看到此方法的調(diào)用
   *  (猜想 : 作者可能想用比較強(qiáng)大，活躍的 observable 庫(kù)替換現(xiàn)在的 publish subscribe)
   *
   * @returns {observable} 狀態(tài)改變的時(shí)候返回最小的 observable.
   * 想要了解跟多關(guān)于 observable 庫(kù)，建議看下 
   * https://github.com/zenparsing/es-observable (標(biāo)準(zhǔn) es Observable)
   */
  function observable() {
    //訂閱方法賦值給變量 outerSubscribe
    var outerSubscribe = subscribe
    return {
      /**
       * 這是一個(gè)最小的觀察訂閱方法
       * 
       * @param {Object}  觀察著的任何一個(gè)對(duì)象都可以作為一個(gè) observer.
       * 觀察者應(yīng)該有 `next` 方法
       */
      subscribe(observer) {

        //判斷 observer 是一個(gè)對(duì)象
        if (typeof observer !== "object") {
          //拋出異常
          throw new TypeError("Expected the observer to be an object.")
        }

        //獲取觀察著的狀態(tài)
        function observeState() {
          if (observer.next) {
            observer.next(getState())
          }
        }

        observeState()
        //返回一個(gè)取消訂閱的方法
        var unsubscribe = outerSubscribe(observeState)
        return { unsubscribe }
      },
      //對(duì)象的私有屬性，暫時(shí)不知道有什么用途
      [$$observable]() {
        return this
      }
    }
  }

  //reducer 返回其初始狀態(tài) 
  //初始化 store 里的 state tree
  dispatch({ type: ActionTypes.INIT })

  //返回 store 暴漏出的接口
  return {
    dispatch, //唯一一個(gè)可以改變 state 的哈按時(shí)
    subscribe, //訂閱一個(gè)狀態(tài)改變后，要觸發(fā)的監(jiān)聽(tīng)函數(shù) 
    getState,  // 獲取 store 里的 state
    replaceReducer, //Redux熱加載的時(shí)候可以替換 Reducer
    [$$observable]: observable //對(duì)象的私有屬性，供內(nèi)部使用
  }
}

代碼已經(jīng)放在 githunb 上，大家可以查看 https://github.com/jiechud/redux-source-analyze , 如果對(duì)你有幫助，麻煩請(qǐng) Star 一下吧.