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

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

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

Redux 是 JavaScript 狀態容器，提供可預測化的狀態管理。 Redux 是由 Flux 演變而來。

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

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

我們知道狀態機是表示有限個狀態以及在這些狀態之間的轉移和動作等行為的數學模型。

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

可以如下自己實現一個狀態機：

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

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

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

整理了一張 Redux 的狀態圖如下：

對于 Redux 來說，就是把數據當成狀態來處理，reducer 就是根據行為（action） 將當前數據（狀態）轉成新的狀態，新的數據狀態可以繼續被 reducer 處理。

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

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

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

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

dispatch 是更新狀態樹的方法，在 dispatch 中會調用 reducer， 且通知監聽者數據已發生變化。

從上面的分析應該可以推斷出 Redux 暴露的 dispatch 會接受一個 action，來決定根據 reducer 去轉換狀態樹，那么也可以推斷出 Redux 一定也需要提供一個接受 reducer 函數的API。

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

export default function createStore(reducer, initialState) {
  // 在調用 createStore 的時候，必須傳入 reducer， 且 reducer 必須為函數
  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
  
  // 返回此時的狀態
  function getState() {
    return currentState
  }

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

  // 發布函數， 在 action 觸發狀態的改變后，通知所有訂閱的 listener
  function dispatch(action) {
    // 傳入的 action 必須為 plain object，也就是 action creator 返回的對象
    // 自己傳入 action 對象也是可以的
    // 但是 Redux 推薦的寫法是 action creator 的寫法
    // 至于寫成函數的好處不在這里討論
    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 和當前狀態經過 reducer 處理之后返回一個新的狀態
      // currentReducer 就是 createStore 傳進來的 reducer
      // 可以切回去看看上面我總結的圖
      currentState = currentReducer(currentState, action)
    } finally {
      isDispatching = false
    }
    // 通知訂閱的事件
    listeners.slice().forEach(listener => listener())
    return action
  }

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

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

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

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

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

原文 @github
作者 @zwhu