---
# System prepended metadata

title: 介紹Redux的功能與結構設置

---

# 介紹Redux的功能與結構設置

Redux 是一個全域的資料管理工具，更簡單來說，
就是能替你管理整個網站需要的 State，
所有的資料都能放在 Redux，需要資料的 Component，也直接從 Redux 取得

![](https://i.imgur.com/TasRDrz.png)

<br>

### Action
redux產生整個應用程序(application)的state，那我們要怎麼知道下個state是什麼？怎麼產生新的state呢？
改變state的唯一方法，就是透過action，而“Dispatching an action”就是發送action的過程。
而action呢，其實不過就是javascript的object，action範例如下：

1.type: 每個action都會有type屬性來描述state該怎麼改變。
2.payload: 在下方的範例裡，payload是一篇新文章，reducer將在之後把這篇文章加到state。

### Reducer
Reducer其實只是javascript的function，而這個function內含兩個參數，第一個為current state，也就是目前state的資料，另一個則是action，如果我們想要更改store內的state資料，則要透過action的幫忙。

### Store
store在redux中負責協調所有的moving parts。
簡而言之，它就是大腦的角色！整個應用程序(application)的state都在store裡，所以要使用redux前我們應該要先建立一個可以容納所有資料的大腦store！

<br>

![](https://i.imgur.com/A5KFmo0.png)

<br><br><br>

# 學習如何使用Redux的存取

<br>

設定reducer做存取結構與範圍，dispatch給action取得要的參數值

![](https://i.imgur.com/AwqwZT1.png)

<br><br>

存取reducer裡的資料

![](https://i.imgur.com/dS8Wd9e.png)

<br><br>

在reducer放入新增與刪除資料的格式
* 新增
    1. id(作為需要取得的參數)
    2. task(取得的內容)
    3. completed(設定為還未取得狀態)

* 刪除
    1. 使用filter(找尋對應值的ID)

![](https://i.imgur.com/8VMkCyk.png)

<br><br>

在action放入新增(ADD_TASK)與刪除(REMOVE_TASK)資料的參數(task與id)

![](https://i.imgur.com/thR4H5c.png)

<br><br>

---
##### tags: `Redux` 