一、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）

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的唯一性。