# Redux & Mobx
## 共通點
1. 為了解決狀態管理混亂和無法有效同步的問題，統一維護管理應用狀態
2. 某一狀態只有一個可信數據來源（通常命名為store，指狀態容器）
3. 操作更新狀態方式統一，並且可控（通常以action方式提供更新狀態的途徑）
4. 支持將store與React組件連接，如react-redux，mobx-react

## 差異
### Redux
Redux更多的是遵循Flux模式的一種實現，是一個JavaScript 庫，它關注點主要是以下幾方面∶

**Action:** 一個JavaScript物件，描述動作相關信息
**Reducer:** 定義應用狀態如何響應不同動作（action），如何更新狀態;
**Store:** 管理action和reducer及其關係的物件，主要提供以下功能∶
1. 維護應用狀態並取得目前application的state(getState());
2. 支持action的分發，更新狀態(dispatch(action));
3. 監聽state的變化(subscribe(listener));

**異步流:** 由於Redux所有對store狀態的變更，都應該通過action觸發，異步任務（通常都是業務或打API）也不例外，而為了不將業務或數據相關的任務混入React組件中，就需要使用其他框架配合管理異步任務流程，如redux-thunk，redux-saga等;

**redux中reduce只能使用purefunction的原因：**
Redux simply checks whether the old object is the same as the new object by comparing the memory locations of the two objects. So if you mutate the old object’s property inside a reducer, the “new state” and the “old state” will both point to the same object. Hence Redux thinks nothing has changed! So this won’t work.

---

### Mobx
Mobx是一個透明函數響應式編程的狀態管理庫，它使得狀態管理簡單

**Action:** 定義改變狀態的動作函數，包括如何變更狀態;
**Store:** 集中管理模塊狀態（State）和動作(action)
**Derivation(衍生):** 從應用狀態中派生而出，且沒有任何其他影響的數據

---

## 對比總結

|Mobx|Redux|
|:-----:|:---:|
| mobx將數據保存在分散的多個store中|redux將數據保存在單一的store中|
| mobx適用observable保存數據，數據變化後自動處理響應的操作 |redux使用plain object保存數據，需要手動處理變化後的操作|
| mobx中的狀態是可變的，可以直接對其進行修改 | redux使用不可變狀態，這意味著狀態是只讀的，不能直接去修改它，而是應該返回一個新的狀態，同時使用純函數 |
|mobx相對來說比較簡單，在其中有很多的抽象，mobx更多的使用面向對象的編程思維|redux會比較複雜，因為其中的函數式編程思想掌握起來不是那麼容易，同時需要藉助一系列的中間件來處理異步和副作用|
|mobx中有更多的抽象和封裝，維護會比較困難，同時結果也難以預測|redux提供能夠進行時間回溯的開發工具，同時其純函數以及更少的抽象，讓維護變得更加的容易|

---

### Flux
Flux 是由 Facebook 提出的設計概念，它最重要的思維是**單向資料流**，幫助你撰寫有條理的前端架構。


Flux 中有四位主要角色：

1. Action：規範所有改變資料的動作，讓你可以快速掌握整個 App 的行為。
2. Dispatcher：將目前發生的行為，告知給所有已註冊的 Store。
3. Store：存放資料和業務邏輯，並且只提供 getter API 讓人取得資料。
4. View：根據資料渲染 UI 和傾聽使用者的操作事件。

https://medium.com/4cats-io/%E6%B7%B1%E5%85%A5%E6%B7%BA%E5%87%BA-flux-44a48c320e11