摘要：我們知道狀態(tài)機是表示有限個狀態(tài)以及在這些狀態(tài)之間的轉(zhuǎn)移和動作等行為的數(shù)學(xué)模型。對照上面我們自己寫的狀態(tài)機代碼可以看出的作用告訴狀態(tài)樹發(fā)生什么變化，及所需要的數(shù)據(jù)是什么。

我之前開發(fā)網(wǎng)站的時候一直用的是 Flux， 自從出了 Redux 之后由于種種原因沒有跟進了解，最近手頭上的事情基本忙的差不多了，抽空閱讀了 Redux 的源碼，并整理了這篇博文。

先說重點： Redux 與 React 沒有關(guān)系，就好像 Javascript 和 Java ，雷鋒和雷峰塔的關(guān)系一樣。 Redux 旨在處理數(shù)據(jù)的流動。

Redux 是 JavaScript 狀態(tài)容器，提供可預(yù)測化的狀態(tài)管理。 Redux 是由 Flux 演變而來。

那么 Flux 是什么？ Flux 在這里并不是一個框架，而是提供了一套數(shù)據(jù)流動的方案，類似 MVVM 的概念。

Redux 是一個狀態(tài)容器，這句話挺難理解的，下面的分析也是我的個人見解，不見得正確，歡迎指正。

我們知道狀態(tài)機是表示有限個狀態(tài)以及在這些狀態(tài)之間的轉(zhuǎn)移和動作等行為的數(shù)學(xué)模型。

例子：
有一個提供簡單加減計算的二則運算的算法。初始值為0，可以增加一個值和減去一個值。

可以如下自己實現(xiàn)一個狀態(tài)機：

const fsm = {
    currentState: 0,
    create(state) { this.currentState = state },
    getState() {
        return this. currentState
    },
    transition(action) {
        switch(action.type) {
            case "add": 
                this.currentState =  this.currentState + action.num
                break
            case "sub": 
                this.currentState =  this.currentState - action.num
                break    
            default:
                break
        } 
    }
}

fsm.create(5)
fsm.transition({"type":"add", "num":-1})
console.log(fsm.getState())   // ==>  4
fsm.transition({"type":"sub", "num":1})
console.log(fsm.getState())   // ==>  3

從上面的例子可以看到狀態(tài)的改變方式為：輸入初始狀態(tài)值5，此時的 currentState 為0，輸入{"type":"add", "num": 1}，經(jīng)過條件判斷是要將狀態(tài)值 5 加 -1 變成 4，再輸入{"type":"sub", "num": 1}，經(jīng)過條件判斷是要將狀態(tài)值 4 減 1 變成 3。

對比 Redux 來看的話， 我們的 fsm 就是 Redux 的 createStore 返回的 store，store.getState() 返回的狀態(tài)對應(yīng) fsm.getState()。 那么 reducer + dispatch + action 對應(yīng)的就是 fsm.transition()。之后會我們分析源碼看看 Redux 是怎樣把 reducer + dispatch + action 轉(zhuǎn)成 fsm.transition。

整理了一張 Redux 的狀態(tài)圖如下：

對于 Redux 來說，就是把數(shù)據(jù)當成狀態(tài)來處理，reducer 就是根據(jù)行為（action） 將當前數(shù)據(jù)（狀態(tài)）轉(zhuǎn)成新的狀態(tài)，新的數(shù)據(jù)狀態(tài)可以繼續(xù)被 reducer 處理。

Action 是把數(shù)據(jù)從應(yīng)用傳到 stateTree（狀態(tài)樹）的輸入動作（payloads）。按照約定來說 action 是一個帶有 type 屬性的 javascript plain object，對應(yīng)著 Flux 中的 payload。

Action Creator 是一個創(chuàng)建 Action 的函數(shù)，額，其實就是函數(shù)式編程搞出的概念，把一個表達式包裝成一個函數(shù)，返回這個 Action。

對照上面我們自己寫的狀態(tài)機代碼可以看出 action 的作用告訴 statetree (狀態(tài)樹)發(fā)生什么變化，及所需要的數(shù)據(jù)是什么。

Reducer 的是根據(jù) action 來決定數(shù)據(jù)應(yīng)該變化成什么樣子的函數(shù)，即將上面 fsm 中的switch case 表達式包裝而成的函數(shù)。

dispatch 是更新狀態(tài)樹的方法，在 dispatch 中會調(diào)用 reducer， 且通知監(jiān)聽者數(shù)據(jù)已發(fā)生變化。

從上面的分析應(yīng)該可以推斷出 Redux 暴露的 dispatch 會接受一個 action，來決定根據(jù) reducer 去轉(zhuǎn)換狀態(tài)樹，那么也可以推斷出 Redux 一定也需要提供一個接受 reducer 函數(shù)的API。

Redux 提供的 createStore(reducers, initialState) API 確實如我們推斷，會在此時傳入 reducer，以及一個可選的初始狀態(tài)。 createStore 返回的是一個 store， store 和狀態(tài)樹是不同的，此處的store具有dispatch(action) 方法的對象，真正的狀態(tài)樹是 store.getState()（也就是我們真正要使用的數(shù)據(jù)）。

export default function createStore(reducer, initialState) {
  // 在調(diào)用 createStore 的時候，必須傳入 reducer， 且 reducer 必須為函數(shù)
  if (typeof reducer !== "function") {
    throw new Error("Expected the reducer to be a function.")
  }

  var currentReducer = reducer
  var currentState = initialState
  var listeners = []
  var isDispatching = false
  
  // 返回此時的狀態(tài)
  function getState() {
    return currentState
  }

  // 訂閱函數(shù)，調(diào)用 dispatch 的時候會調(diào)用 listener
  function subscribe(listener) {
        // ...
  }

  // 發(fā)布函數(shù)， 在 action 觸發(fā)狀態(tài)的改變后，通知所有訂閱的 listener
  function dispatch(action) {
    // 傳入的 action 必須為 plain object，也就是 action creator 返回的對象
    // 自己傳入 action 對象也是可以的
    // 但是 Redux 推薦的寫法是 action creator 的寫法
    // 至于寫成函數(shù)的好處不在這里討論
    if (!isPlainObject(action)) {
      throw new Error(
        "Actions must be plain objects. " +
        "Use custom middleware for async actions."
      )
    }

    // 強制要求 action 必須帶入 type 屬性，比 Flux 有更強的約束
    if (typeof action.type === "undefined") {
      throw new Error(
        "Actions may not have an undefined "type" property. " +
        "Have you misspelled a constant?"
      )
    }

    if (isDispatching) {
      throw new Error("Reducers may not dispatch actions.")
    }

    try {
      isDispatching = true
      // 這里就是把 action 和當前狀態(tài)經(jīng)過 reducer 處理之后返回一個新的狀態(tài)
      // currentReducer 就是 createStore 傳進來的 reducer
      // 可以切回去看看上面我總結(jié)的圖
      currentState = currentReducer(currentState, action)
    } finally {
      isDispatching = false
    }
    // 通知訂閱的事件
    listeners.slice().forEach(listener => listener())
    return action
  }

  // 狀態(tài)初始話，此時的 Action 為 { type: ActionTypes.INIT }
  dispatch({ type: ActionTypes.INIT })

  // createStore 最后返回一個罕有 dispatch 和 getState 的對象
  return {
    dispatch,
    subscribe,
    getState,
    replaceReducer
  }
}

Redux 就像是作者自己的介紹，是一個 JavasSript 的狀態(tài)容器，所有的數(shù)據(jù)（狀態(tài)）的變化都是當前狀態(tài)和 Action 共同的作用結(jié)果。 對于使用者（一般都是指 view）來說，不用關(guān)心數(shù)據(jù)是怎樣變化，只需要在 view 層面等待 store 通知自己數(shù)據(jù)發(fā)生變化，然后把數(shù)據(jù)渲染成頁面即可。

這里沒有提到 Redux 的另一個比較重要也比較難理解的 Middleware。因為如果在這里說的的話，文章不知道要寫多長，而長文我現(xiàn)在也駕馭不住，所以干脆就不寫了，后面我會再補一篇理解 Middleware 的文章。

其實我對 Redux 的這種實現(xiàn)狀態(tài)的方式并不太喜歡，相對來說 javascript-state-machine 看起來更舒服一些，不知道和 Redux 結(jié)合有什么效果。可能畫面太美，我不敢想?。

原文 @github
作者 @zwhu