React總結篇之三_從Flux到Redux

一、Flux
Redux是Flux思想的另一種實現方式，Flux一族框架（包括Redux）貫徹的最重要的觀點是單向數據流；

1.MVC框架的缺陷
MVC是業界廣泛接受的一種前端應用框架類型，這種框架把應用分為3個部分：

• Model（模型）負責管理數據，大部分業務邏輯也應該放在Model中；
• View（視圖）負責渲染用戶界面，應該避免在View中涉及業務邏輯；
• Controller（控制器）負責接受用戶輸入，根據用戶輸入調用對應的Model部分邏輯，把產生的數據結果交給View部分，讓View渲染出必要的輸出。

但是，在實際框架實現中，總是可以允許View和Model直接通信，因此會變得非常混亂！

2.Flux
2.1 Flux包含4個部分：

• Dispatcher：處理動作分發，維持store之間的依賴關系；
• Store：負責存儲數據和處理數據相關邏輯；
• Action：驅動Dispatcher的JavaScript對象，代表一個動作的純數據，action對象必須要有一個名為type的字段（字符串類型）；
• View：視圖部分，負責顯示用戶界面

2.2 Flux的優勢與不足
（1）優勢：單向數據流。在Flux的理念里，如果想改變界面，就必須改變store中的狀態，如果要改變store中的狀態，必須派發一個action對象。
（2）不足：store之間依賴關系（如果兩個store之間有依賴關系，就必須用上Dispatcher的waitFor函數）；難以進行服務器端渲染；store混雜了邏輯和狀態。

二、Redux
1.Redux的基本原則：

• 唯一數據源
• 保持狀態只讀
• 數據改變只能通過純函數完成

1.1 唯一數據源：
指應用的狀態數據應該只存儲在唯一的一個store上，所有組件的數據源就是這個store上的狀態。store是一個樹形的對象，每個組件往往只是用樹形對象上的一部分數據。要驅動用戶界面渲染，就要改變應用的狀態，但是改變狀態的方法不是去修改狀態上的值，而是創建一個新的狀態對象返回給Redux，由Redux完成新的狀態的組裝。

1.2 數據改變只能通過純函數完成：
這個純函數就是Reducer，在Redux中，每個reducer的函數簽名如下：
reducer（state，action）
第一個參數state是當前的狀態，第二個參數action是接收到的action對象，而reducer要做的事情，就是根據state和action的值產生一個新的對象返回。reducer只負責計算狀態，不負責存儲狀態。因為reducer是純函數，函數的返回結果必須由參數state和action決定，而且不產生任何副作用，也不能修改參數state和action對象。

2. 容器組件和傻瓜組件
   （1）容器組件：和Redux Store打交道，讀取Store的狀態，用于初始化組件的狀態，同時還要監聽Store的狀態改變；當Store狀態發生變化時，需要更新組件狀態，從而驅動組件重新渲染；當需要更新Store狀態時，就要派發action對象。
   （2）傻瓜組件：根據當前props和state，渲染出用戶界面。這是一個純函數，根據props產生結果。

3. React-Redux庫
   React-Redux兩個最主要的功能：
   （1）connect：連接容器組件和傻瓜組件
   （2）Provider：提供包含store的context

3.1 connect：
export default connect（mapStateToProps，mapDispatchToProps）（Counter）
connect是React-Redux提供的一個方法，它接收兩個參數mapStateToProps和mapDispatch-ToProps，執行結果依然是一個函數，所以才在后面又加一個圓括號，把connect函數執行的結果立刻執行，這一次參數是Counter這個傻瓜組件。這里有兩個函數執行，第一次是connect函數的執行，第二次是把connect函數返回的函數再次執行，最后產生的就是容器組件。
connect函數作為容器組件，做的事情無外乎兩件事：
（1）把store上的狀態轉換為內層傻瓜組件的prop；
（2）把內層傻瓜組件中的用戶動作轉化為派送給Store的動作，即把內層傻瓜組件暴露出來的函數類型的prop關聯上dispatch函數的調用，每個prop代表的回調函數的主要區別就是dispatch函數的參數不同，這就是mapDispatchToProps函數做的事情。

3.2 Provider
React-Redux幾乎就是provider。
React-Redux要求store是包含以下3個函數的object：

• subscribe
• dispatch
• getState

另外，React-Redux定義了provider的componentWillReceiveProps函數，React-Redux在componentWillReceiveProps函數中會檢查這一次渲染時代表store的prop和上次的是否一樣。如果不一樣，就會告警，這樣做是為了避免多次渲染用了不同的Redux store，每個Redux應用只能有一個Redux store，在整個Redux的生命周期中都應該保持Store的唯一性。