redux和mobx對比

Redux

1. action:一個javascript對象，描述動作相關信息，主要包含type和payload屬性；
   1. type:action類型；
   2. payload：負載數據；
2. reducer：定義應用狀態如何響應不同動作（action），如何更新狀態；
3. store：管理action和reducer及其關係等對象，主要提供以下功能：
   1. 維護應用狀態並支持訪問狀態（getstate()）;
   2. 支持監聽action的分發，更新狀態（dispatch（action））；
   3. 支持訂閱store的變更（subscribe（listener））；
   4. 異步流：由於redux狀態的更新，都應該通過action觸發，異步任務（通常都是業務或獲取數據任務）也不例外，而爲了不將業務或數據相關的任務混入react組件中，就需要使用其他框架配合管理異步任務流程，如redux-thunk，redux-saga等；

Redux三大原則

1.單一數據源
2.State 是隻讀的
3.使用純函數來執行修改

mobx

1. action：定義改變狀態的動作函數，包含如何變更狀態；
2. store：集中管理模塊狀態（state）和動作（action）；
3. Derivation（衍生）：從應用狀態中派生而出，且沒有任何其他影響的數據，我們稱爲derivation（衍生），衍生在以下情況下存在：
   1. 用戶界面；
   2. 衍生數據，主要有兩種：
      1. Computed Values（計算值）：計算值總是可以使用純函數（pure functon）從當前可觀察狀態中獲取；
      2. Reactions（反應）：反應指狀態變更時需要自動發生的副作用，這種情況下，我們需要實現其讀寫操作；

函數式和麪向對象

Redux更多的是遵循函數式編程（Functional Programming, FP）思想，而Mobx則更多從面相對象角度考慮問題。

Redux提倡編寫函數式代碼，如reducer就是一個純函數（pure function），如下：

(state, action) => {

  return Object.assign({}, state, {

    ...

  })

}

純函數，接受輸入，然後輸出結果，除此之外不會有任何影響，也包括不會影響接收的參數；對於相同的輸入總是輸出相同的結果。

Mobx設計更多偏向於面向對象編程（OOP）和響應式編程（Reactive Programming），通常將狀態包裝成可觀察對象，於是我們就可以使用可觀察對象的所有能力，一旦狀態對象變更，就能自動獲得更新。

單一store和多store

store是應用管理數據的地方，在Redux應用中，我們總是將所有共享的應用數據集中在一個大的store中，而Mobx則通常按模塊將應用狀態劃分，在多個獨立的store中管理。

JavaScript對象和可觀察對象

Redux默認以JavaScript原生對象形式存儲數據，而Mobx使用可觀察對象：

1. Redux需要手動追蹤所有狀態對象的變更；

2. Mobx中可以監聽可觀察對象，當其變更時將自動觸發監聽；

不可變（Immutable）和可變（Mutable）

Redux狀態對象通常是不可變的（Immutable）：

我們不能直接操作狀態對象，而總是在原來狀態對象基礎上返回一個新的狀態對象，這樣就能很方便的返回應用上一狀態；而Mobx中可以直接使用新值更新狀態對象。

mobx-react和react-redux

使用Redux和React應用連接時，需要使用react-redux提供的Provider和connect：

1.Provider：負責將Store注入React應用；

2.connect：負責將store state注入容器組件，並選擇特定狀態作爲容器組件props傳遞；

對於Mobx而言，同樣需要兩個步驟：

1.Provider：使用mobx-react提供的Provider將所有stores注入應用；

2.使用inject將特定store注入某組件，store可以傳遞狀態或action；然後使用observer保證組件能響應store中的可觀察對象（observable）變更，即store更新，組件視圖響應式更新。

選擇Mobx的原因

1.學習成本少：Mobx基礎知識很簡單，學習了半小時官方文檔和示例代碼就搭建了新項目實例；而Redux確較繁瑣，流程較多，需要配置，創建store，編寫reducer，action，如果涉及異步任務，還需要引入redux-thunk或redux-saga編寫額外代碼，Mobx流程相比就簡單很多，並且不需要額外異步處理庫；

2.面向對象編程：Mobx支持面向對象編程，我們可以使用@observable and @observer，以面向對象編程方式使得JavaScript對象具有響應式能力；而Redux最推薦遵循函數式編程，當然Mobx也支持函數式編程；

3.模版代碼少：相對於Redux的各種模版代碼，如，actionCreater，reducer，saga／thunk等，Mobx則不需要編寫這類模板代碼；

不選擇Mobx的可能原因

1.過於自由：Mobx提供的約定及模版代碼很少，這導致開發代碼編寫很自由，如果不做一些約定，比較容易導致團隊代碼風格不統一，所以當團隊成員較多時，確實需要添加一些約定；

2.可拓展，可維護性：也許你會擔心Mobx能不能適應後期項目發展壯大呢？確實Mobx更適合用在中小型項目中，但這並不表示其不能支撐大型項目，關鍵在於大型項目通常需要特別注意可拓展性，可維護性，相比而言，規範的Redux更有優勢，而Mobx更自由，需要我們自己制定一些規則來確保項目後期拓展，維護難易程度；