# 3.3 Redux

#### 什麼時候要用Rddux？

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

![](https://2919068548-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-Lh-g1QkhJbS3wly_4sc%2F-Lk7d9CCFH1IvlQQFVlp%2F-Lk7dyHUIFio3y7XHzTw%2F1.gif?alt=media\&token=66acc1f9-3f5a-4003-a2df-7de25dbc391e)

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

![](https://2919068548-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-Lh-g1QkhJbS3wly_4sc%2F-Lk7d9CCFH1IvlQQFVlp%2F-Lk7fsZOxwzE5WgSCYEd%2F2.gif?alt=media\&token=f64f2fcf-0254-4a2e-b3ea-b60f0847a30c)

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

![](https://2919068548-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-Lh-g1QkhJbS3wly_4sc%2F-Lk7d9CCFH1IvlQQFVlp%2F-Lk7gZ9MM94OWU6OwfXn%2F3.gif?alt=media\&token=76478e73-7c18-4d09-a0d7-c485195ee311)

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

![](https://2919068548-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-Lh-g1QkhJbS3wly_4sc%2F-Lk7d9CCFH1IvlQQFVlp%2F-Lk7gpsjtNQ1_7RWr0jy%2F4.gif?alt=media\&token=687a97db-107f-4be8-8593-5033e8c02695)

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

* UI可以根據應用程序狀態顯著變化
* 並不總是以一種線性的，單向的方式流動
* 許多不相關的組件以相同的方式更新狀態
* 狀態樹並不簡單
* 狀態以許多不同的方式更新
* 您需要能夠撤消以前的用戶操作

<br>

**三大元件**

* **Action**: 描述發生的事件類別(type)，以及所承載的資訊(payload)
* **Reducer**: 保管state ; 接收 action 對 state 做改變
* **Store**: 整合Reducer (每個專案只能有一個store，若有許多不同類型的資料則是以Reducer區分，最後再用combineReducers)打包多個Reducer

![](https://firebasestorage.googleapis.com/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-Lh-g1QkhJbS3wly_4sc%2Fuploads%2FHAcio9vtb2uqCfLyqeel%2Ffile.png?alt=media)

**流程**

![](https://2919068548-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-Lh-g1QkhJbS3wly_4sc%2F-LkcYKNjn0tlInHr3OGS%2F-LkcYOo03zwcK8MDoy0F%2Fredux-step.gif?alt=media\&token=316e4c4e-816f-41fd-8495-634a4f4e3af3)

1. **事件發生**： 使用者觸發事件
2. **發送 action**： Action Creator 向 Store 發送 action
3. **更改 state**： Store 調用 Reducer ，給予 state 和 action 而得到新的 state。
4. **發佈通知**： 需要用到 state 的元件會向 store 訂閱通知，一但 state 有變化，即會收到通知，可重新取得所需 state，重新渲染元件。