mobx分享

Mobx 及 相關插件

主要從以下幾方面介紹:

• Redux使用
• MoBx使用
• 對比redux、MoBx區別
• MST介紹

redux篇

幾個重要概念:
Tood List

• Action: Js對象. 主要包含type、payload屬性
• Store: Redux 應用只有一個單一的 store
• Reducer: 描述action如何更改state tree

Mobx篇

任何源自應用狀態的東西都應該自動地得到

幾個重要概念 Demo

• action: 定義改變狀態的動做函數
• store: 集中管理模塊狀態（State）
• Computed Values: 計算值老是可使用純函數（pure function）從當前可觀察狀態中獲取
• Reactions: 反應指狀態變動時須要自動發生的反作用
  

分析實現
補充

vue篇

vue官網：幾乎相同的反應系統。在有限程度上，React + Mobx 也能夠被認爲是更繁瑣的 Vue，因此若是你習慣組合使用它們，那麼選擇 Vue 會更合理

區別篇

• 函數式和響應式編程

  Redux須要手動追蹤全部狀態對象的變動(setState、reducer)；Mobx設計更多偏向於響應式編程（Reactive Programming），一般將狀態包裝成可觀察對象，因而咱們就可使用可觀察對象的全部能力，一旦狀態對象變動，就能自動得到更新。

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

// Redux狀態對象一般是不可變的（Immutable）, 而Mobx中能夠直接使用新值更新狀態對象
switch (action.type) {
  case REQUEST_POST:
  	return Object.assign({}, state, {
      post: action.payload.post
  	});
  default:
    retur nstate;
}
複製代碼

• 單一store與多store

  store是應用管理數據的地方，在Redux應用中，咱們老是將全部共享的應用數據集中在一個大的store中，而Mobx則一般按模塊將應用狀態劃分，在多個獨立的store中管理

爲什麼引入Mobx

• 學習成本小，較靈活 demo 而Redux確較繁瑣，流程較多，須要配置，建立store，編寫reducer，action
• 模版代碼少：相對於Redux的各類模版代碼，如，actionCreater，reducer，saga／thunk等，Mobx則不須要編寫這類模板代碼

Mobx缺點

• 過於靈活，對於多人蔘與的項目，容易致使代碼風格不統一

MST（mobx-state-tree）

• 聲明默認值
• 定義類型