---
# System prepended metadata

title: Redux
tags: [Angular, React, JavaScript, Vue]

---

# Redux
[Redux](https://redux.js.org/)
## 1.redux理解
### 1.2 redux是什麼?
:::info
1) redux是一個獨立專門用於做狀態管理的JS庫(==不是react插件庫==)
2) 它可以用在react, angular, vue等項目中, 但基本與react配合使用
3) 作用: 集中式管理react應用中多個組件共享的狀態
4) 基本上和react適配性比較高
:::
可以知道說**redux**在幫我們做資料的集中式管理。
### 1.3 工作流程
![redux flow](https://i.imgur.com/fC7Pl26.png)

React Component: 組件。有兩個方面，展現數據、跟使用者交互更新數據。
最上面的Action Creators 和 store 和 Reducers都是rudex的代碼，說白了，就是看我的組件，怎麼跟Redux進行交互。因為我們的redux管理著狀態。

Redux裡面有一個非常核心的對象**Store**，存儲的倉庫。然後我的組件從store讀狀態，也就是說Store會提供方法讓組件讀取。

單獨讀狀態很簡單。更新狀態顯示流程有點長。譬如說我組件裡面有一個刪除按鈕，可能會刪除我狀態裡面的某一個數據。點擊刪除是不是要通知Store去做刪除、去更新狀態。那怎麼通知呢?通知需要調用一個方法，通知store幹些事情，store有一個方法。叫做dispatch(分發事件、觸發事件)。一旦點擊按鈕，我就要通知store對象去更新狀態。分發的時候傳了一個action，對象裡面有兩個屬性，一個是type一個data。type是固定的，觸發事件要指定回調函數。綁定事件，要綁定事件名跟回調函數。ig.發布消息要指定消息名和數據。

現在我要通過dispatch去通知store對象去更新狀態，那dispatch的action要傳一些東西，因為要做什麼更新，更新的時候我們要有條件數據。
###### tags: `React` `JavaScript` `Angular` `Vue`