iT邦幫忙

第 11 屆 iT 邦幫忙鐵人賽

DAY 16
1
Modern Web

React.js 從 【0】 到【1】推坑計畫 系列 第 16

【Day 16】state management - redux 基礎概念

今天開始會進入 React 中比較進階的主題 - state management
在前幾天中我們介紹了 state,也介紹了 props,我們了解一個 component 可以創建自己的 state,
並以 props 的形式傳下去給子元件使用,而資料流是單向的,因此子元件若要觸發更改 state 的函式需要使用由副元件傳下來的 callback function。

像前幾天的例子,總共只有父層與子層兩層,但如果總共有四層或更多層級的子元件呢?
props 的傳遞將會變得非常複雜與難以管理。

因此 redux 就派上用場啦!它可以創建一個共用的 store,裡面存放著會需要在多元件或是較深層級子元件會用到的 state,當子元件需要用到那些資料,就直接去 store 取就好,不必再透過一層一層的 props 傳遞了,今天就來談談 redux 的基本概念吧。
https://ithelp.ithome.com.tw/upload/images/20190920/20113277POR3MxjnLx.png

redux 三大要件:store action reducer

https://ithelp.ithome.com.tw/upload/images/20190920/20113277wrSzzSjr5T.png

redux 由這三大元素組成,等介紹過後,回過頭看看上面這張圖,就會了解 redux 的功用。

store

store 可以想像成國家的金庫,任何城市、任何鄉鎮要拿資金都可以直接跟它拿取。
這裏是用來儲存需要讓許多元件使用的 state 的地方。

action

action 其實是一個物件,描述使用者要發動的 action(行為)的類別與帶上的資料,通常由 dispatch 函式將 action 傳送到 reducer 處理。
例如:

const action = {
    type: 'ADD_COUNT',
    payload: 1
}

reducer

reducer 負責處理 dispatch(派發)來的 action ,並且根據 action 的 type 進行對應的處理,並將改變後的 state 傳回 store。

以上三個元素就是 redux 的三大概念,這時再回過頭看看上面的圖片,view 代表使用者操作的頁面,通常資料流會從 view 出發,例如點選一個按鈕後,dispatch 一個 action 到 reducer , reducer 再根據送來的 action type 做相對應處理,例如 reducer 接到 'ADD_COUNT' 的 action,將 count state 加 1,再送回到 store 中讓 component 抓取。

redux 的基本概念就是這些,額外補充一下 redux 並不是 react 中的套件,只是它跟 react 真的太合了,所以一般都會將兩者搭配使用。

明天將實作一次 redux ,把 theme 背景主題當成 global state 讓 component 使用,敬請期待~


上一篇
【Day15 路由神器 - React-router 】
下一篇
【Day 17】Redux 實戰演練
系列文
React.js 從 【0】 到【1】推坑計畫 30

尚未有邦友留言

立即登入留言