關於前端架構中的狀態管理方法論，經常能聽到的Flux, Redux 和Vuex，這些方法論乍一看好像都差不多，再一看又有一些區別，這是我剛剛接觸這些東西時的一個直觀感受。看了很多其他人寫的文章，自己又畫了點圖謝謝品味了一下，我決定還是把它們寫出來，既能鞏固所得，又可以方便以後時常溫習。

記得React剛出來不久時，Flux還是React官方指定，Redux那會兒還沒有影，當時認真看了Flux，隔了一年多再回頭竟然忘了個乾淨，有人問到我時的表現像是完全沒聽說過。這也是我重新看過之後決定整理一下的原因。

廢話不多少，言歸正傳，關於Flux, Redux和Vuex三者的關係呢，先用一句話總結：

它們都是基於單向資料流的狀態管理方法論。Flux最早提出，作為對傳統前端MVC的一種改進（我不認為是顛覆）。Redux深受Flux的啟發，又加入了函數語言程式設計的思想，算是Flux的極大增強版本。Vuex可以說是基於Flux並且吸收了Redux的一些特點，但它與Vue是緊密捆綁的。Redux其實除了在React中廣泛應用，Angular.js以及Angular2中也完成了它的實現。

Flux 要點

備註：虛線小紅框會在比較Redux和Flux時用到。

• View:
  
  1. 確定相應的Store以及監聽其變化來更新檢視。
  2. 發起Action。

// Get binding store
 

var ListStore = require('../stores/ListStore');
.....
// Subscribe store change event
componentDidMount: function() {
    ListStore.addChangeListener(this._onChange);
}
...
// Pass action to Dispatcher
createNewItem: function (event) {
    // There's a dispatcher instance in ButtonActions
    ButtonActions.addNewItem('new item'
 
);
}

• Action:

  1. 每個Action都是一個物件，包含一個actionType屬性（說明動作的型別）和一些其他屬性（用來傳遞資料）

• Dispatcher:

  1. 全域性唯一。
  2. 邏輯簡單，只用來派發action去相應的store。
  3. 通過 AppDispatcher.register() 來登記各種Action的回撥函式。

// dispatcher/AppDispatcher.js 全域性唯一
var Dispatcher = require('flux').Dispatcher;
var ListStore = require('../stores/ListStore');
module.exports = new Dispatcher();
.....
//註冊action回撥函式
AppDispatcher.register(function (action) {
  switch(action.actionType) {
    case 'ADD_NEW_ITEM':
      ListStore.addNewItemHandler(action.text);
      ListStore.emitChange();
      break;
    default:
      // no op
  }
})

// actions/ButtonActions.js。dispatch方法只用來分發action
var AppDispatcher = require('../dispatcher/AppDispatcher');
var ButtonActions = {
  addNewItem: function (text) {
    AppDispatcher.dispatch({
      actionType: 'ADD_NEW_ITEM',
      text: text
    });
  },
};

• Store:
  
  1. 存放view中的資料。
  2. 傳送change事件，通過view中定義的handler捕捉變化。

var EventEmitter = require('events').EventEmitter;
var assign = require('object-assign');

var ListStore = assign({}, EventEmitter.prototype, {
  // data in View
  items: [],
  .......
  emitChange: function () {
    this.emit('change');
  },
  addChangeListener: function(callback) {
    this.on('change', callback);
  }
  ....
});

Redux 要點

What is Redux

• A single, immutable data store.
• One-way data flow.
• An approach to change based on pure functions and a stream of actions.

Redux 設計思想

（1）Web 應用是一個狀態機，檢視與狀態是一一對應的。

（2）所有的狀態，儲存在一個物件裡面。

Redux vs Flus: Redux ＝ Reducer ＋ Flux

1.Redux將Flux中的Dispatcher併入了Store。也可以理解為Redux沒Dispatcher。Redux的設想是使用者永遠不會變動資料，應該在reducer中返回新的物件來作為應用的新狀態。

2.Redux增加了Reducer.

注：通過程式碼對比的直觀感受就是Flux中的view需要知道具體對應哪個store。而在Redux中，store成為一個被所有view共享的公共物件，view只需要通過store.dispatch()來發送action，無需關心具體處理函式。

• View:
  
  1. 通過全域性唯一的store dispatch action 以及獲取最新state
     注: 通過對比flux的view 部分可以看出在Redux中，view不會關心具體的處理函式，只專注於收發就好。
     
• Store:
  
  1. 全域性唯一
  2. 包含整棵state樹: state 和 view 是一一對應的關係
  3. Dispatcher功能已被整合進store：store.dispatch()
  4. state 一旦有變化，store 就會呼叫通過store.subscribe()註冊的回撥函式（一般是render）。
  5. Reducer的拆分就先不講了。

const Counter = ({ value, onIncrement, onDecrement }) => (
  <div>
  <h1>{value}</h1>
  <button onClick={onIncrement}>+</button>
  <button onClick={onDecrement}>-</button>
  </div>
);

const reducer = (state = 0, action) => {
  switch (action.type) {
    case 'INCREMENT': return state + 1;
    case 'DECREMENT': return state - 1;
    default: return state;
  }
};

const store = createStore(reducer);

const render = () => {
  ReactDOM.render(
    <Counter
      value={store.getState()}
      onIncrement={() => store.dispatch({type: 'INCREMENT'})}
      onDecrement={() => store.dispatch({type: 'DECREMENT'})}
    />,
    document.getElementById('root')
  );
};

render();
store.subscribe(render);

• Action:
  
  1. 普通物件，作用與Flux中相同

const action = {
  type: 'ADD_TODO', //必填欄位
  payload: 'Learn Redux'
};

• Reducer:
  
  1. reducer是current stae 和 action 為引數計算new state的純函式。
  2. 純函式無副作用：不能呼叫系統 I/O 的API，不能呼叫Date.now()或者Math.random()等不純的方法，因為每次會得到不一樣的結果 blabla…

const defaultState = 0;
const reducer = (state = defaultState, action) => {
  switch (action.type) {
    case 'ADD':
      return state + action.payload;
    default: 
      return state;
  }
};
const state = reducer(1, {
  type: 'ADD',
  payload: 2
});
// Reducer 是純函式，就可以保證同樣的State，必定得到同樣的 View。
// 但也正因為這一點，Reducer 函式裡面不能改變 State，必須返回一個全新的物件，請參考下面的寫法。
function reducer(state, action) {
  return Object.assign({}, state, { thingToChange });
  // Or
  return { ...state, ...newState };
}
// State 是一個數組
function reducer(state, action) {
  return [...state, newItem];
}

Vuex 要點

這是一張來自Vuex官網的圖：

下面的圖是我重新畫的，風格與之前的Redux和Flux的資料流圖相同，以便與比較：

Redux vs Vuex:

1. 使用mutation來替換redux中的reducer
2. Vuex有自動渲染的功能，所以無需要專門監聽state。(this.$store.getters.doneTodosCount)
3. Vuex中的action是一個函式集合物件，用於async/sync commit mutaions. 和Redux或者Flux中的action只是簡單物件有本質不同，只是叫了一個相同名字。
   注：個人認為action和mutation合在一起就是Redux中的Reducer

先到這裡吧，想到什麼新的東西再來補充。以上是我對前端狀態管理方法論的個人理解，可能有錯誤的地方，歡迎指正:）