3.3 Redux

什麼時候要用Rddux？

1. React 使用單向數據流，這意味著父組件把自身的狀態作為屬性傳遞给子组件。

2. 隨著添加更多的功能，非父子組件之間需要共享一些狀態。 這意味著我們將狀態（和改變這個狀態的函數）提升到最接近的Container Component。我們將這些函數綁定到容器組件，並將它們作為props向下傳遞，讓子組件可以觸發其父組件中的狀態更改，這將更新樹中的所有其他組件。

3. 隨著添加了更多的功能和組件，我們的應用程序狀態流程開始看起來像這樣...

4. 當開始使用Redux後，狀態變成這樣...

如果符合以下條件，那麼應該立即使用Redux。

• UI可以根據應用程序狀態顯著變化

• 並不總是以一種線性的，單向的方式流動

• 許多不相關的組件以相同的方式更新狀態

• 狀態樹並不簡單

• 狀態以許多不同的方式更新

• 您需要能夠撤消以前的用戶操作

三大元件

• Action: 描述發生的事件類別(type)，以及所承載的資訊(payload)

• Reducer: 保管state ; 接收 action 對 state 做改變

• Store: 整合Reducer (每個專案只能有一個store，若有許多不同類型的資料則是以Reducer區分，最後再用combineReducers)打包多個Reducer

流程

1. 事件發生： 使用者觸發事件

2. 發送 action： Action Creator 向 Store 發送 action

3. 更改 state： Store 調用 Reducer ，給予 state 和 action 而得到新的 state。

4. 發佈通知： 需要用到 state 的元件會向 store 訂閱通知，一但 state 有變化，即會收到通知，可重新取得所需 state，重新渲染元件。