# 介紹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`