# Mobx & Redux (修)
###### tags: `mobx redux`

## Mobx
### **基本特性:**
> 1. 可以設定多個store
> 2. observable的state變更的話，自動觸發反應

主要為響應式編程(Functional Reactive Programing)，遵守單向數據流原則

### 優點
* 樣板套件少
* 程式可讀性高
* 小專案的維護性高
* 容易上手
---

## Redux
### **基本特性:**
> 1. 只有單一個store來存放state跟function
> 2. state是immutable的形式
> 3. reducer判斷state的更新
> 4. 只能透過action來改變state

**store負責管理action和reducer及其關係的物件**
> getState: 取得目前application的state
> dispatch(action): 發送action
> subscribe(listener): 監聽state的變化

reducer依據action的type來計算下個state。此外，當沒有取到對應的action type時，至少應該要回傳initial state

https://ithelp.ithome.com.tw/articles/10202842
https://ithelp.ithome.com.tw/articles/10203189

### 優點
* 狀態可預測
* 因程式撰寫規則嚴格，因此在程式數量龐大時具有維護性
---

## 對比

| 對比 | Redux | Mobx |
| -------- | -------- | -------- |
|受歡迎的程度| 勝 | 敗 |
|學習曲線|難|簡單|
|store數量|單個store|多個store|
|數據結構|需手動追蹤資料更新|可自動追蹤更新|
|state|immutable|mutable|
|擴展性|較好|較差|

---

https://ithelp.ithome.com.tw/articles/10197513

https://blog.openreplay.com/state-management-in-react-with-mobx/

https://www.youtube.com/watch?v=83v8cdvGfeA&ab_channel=LearnCode.academy

https://blog.logrocket.com/redux-vs-mobx/#storing-data-single-store-multiple-stores