iT邦幫忙

2021 iThome 鐵人賽

DAY 14
0
Modern Web

用30天更加認識 React.js 這個好朋友系列 第 14

Day14-Redux 篇-介紹 Redux

這篇主要會講述 Redux 的一些介紹,下篇才會開始進行實作。

Redux 是什麼?

Redux 是專門管理 state 的函式庫,它可以將整個專案的 state,儲存在一個樹狀物件並放在唯一的 store 裡面。

為何需要 Redux?

方便管理 state。沒有使用 Redux 的話,我們要透過元件將 state 進行傳遞,如果有 Redux 就可以將 state 集中管理,有需要時再從 store 傳遞給元件。

另外透過 Redux 也可以將操作元件 state 的邏輯部分從元件抽離出來,達到元件做純渲染,Redux 處理資料邏輯的結果。

特色

  1. 不一定要和 React 一起使用,和 React 一起使用的話需要使用 react-redux 將兩者銜接起來,透過 react-redux 可以將 store 內的 state 注入到元件內
  2. Redux 架構圍繞著嚴格的單向資料流。(可參考下圖)
  3. Redux 主要由 action、reducer、store 等三個部分構成,以下詳細說明它們的作用&整個 redux 運作的過程圖

圖片截自 Udemy 線上課程 Modern React with Redux

action creator

當某個事件發生時,會建立一個 JS 物件,該物件即為 action。

action

action 裡面有 type 和 payload 屬性,一定要有 type 屬性,payload 則非必要,分別描述了行為的類型和要傳遞的 state。

dispatch

將 action 傳遞到 reducer 函式。

reducer

reducer 是一個 pure function,它會取得先前的 state 和一個 action,並根據傳入的 action 的 type 去將 state 值做改變,最後回傳的是一個經過計算後新的 state 物件。

另外在一個專案中可以有多個 reducer,每一個都管理它所擁有的全域 state 一部分。

使用 reducer 有些限制:

  1. 改變原本的 state
  2. 執行有 side effect 的動作,像是呼叫 API 和 routing 轉換
  3. 呼叫不是 pure 的 function,像是 Date.now() 或是 Math.random()

store

reducer 回傳後的 state 放在這邊做管理,讓由 react 或其他語言製成的應用程式可以取用。


在對 Redux 有初步的認識後,明天將會實作一個範例。


上一篇
Day13-React 表單驗證篇-使用第三方函式庫 Formik 進行表單的驗證
下一篇
Day15-Redux 篇-實作範例
系列文
用30天更加認識 React.js 這個好朋友32

尚未有邦友留言

立即登入留言