[ Day 23 ] Redux 中的核心概念

2021 iThome 鐵人賽

DAY 23

Modern Web

React.js 30 天學習全記錄系列第 23 篇

13th鐵人賽 2021鐵人賽 react.js

SuoChan 阿關

2021-10-08 12:55:54

1209 瀏覽

上一篇 Day 22 我們已經了解了何謂 Redux 以及該套件的三大原則，今天就要來為大家介紹在 Redux 這個套件中的核心概念及功能名詞介紹。

主要的概念與功能

在 Redux 的官方文件當中有特別提到要開始使用前應該要了解的名詞和概念，所以這邊就幫大家把這些概念整理如下：

Actions

是一個帶有 type 和 payload 兩個屬性的 JavaScript 物件且在其屬性中會說明資料的改變內容為何？

這邊補充說明一下，Actions 物件中的 type 屬性通常會是字串並用來指定這個 Action 類型的名稱，而 payload 屬性則是用來做處理該 Action 物件被執行時需要添加或處理的資料內容（ payload 這個屬性是非必要的，所以可以視需求加入即可）。

另外， type 屬性的命名方式通常會使用 事件分類/事件名稱 ，假設我們是做一個 ToDoList 的話可以這樣命名 Action 中的 type 屬性為： todos/todoAdded 當作該名稱（這個命名方式不是硬性規定，不過官方建議大家可以這樣做）。

/* 創建一個 Action 物件： addTodoAction */
const addTodoAction = {
  type: 'todos/todoAdded',
  payload: 'Buy milk'
}

Reducers

一個接收目前的 state 和指定的 action 這兩個參數的函式，並根據這兩個參數返回一個全新的 State 值。

依據官方文件的說明，我們可以這樣理解 Reducer 函式：

( 原本的 state, action 物件名稱) => 新的 state

你也可以把 Reducer 想像成是一個監聽（ Event Listener ）的物件，而且會根據函式內所指定的 action 類別來處理對應的事件。
另外，關於 Reducers 還有三個使用上必須遵守的原則：

新的 State 值一定都是參考 state 和 action 這兩個參數所產生出來的。
透過 Reducer 所產生的新的 State 值並不是直接修改原本的 State ，而是複製一份本來的 State 值並修改或更新它。
不能做會產生 Side Effects （像是：非同步資料處理或任何會產生非預測的值的行為）的處理，因為 Reducer 本身就是一個 Pure Function 。

下面給大家看一個官方的簡易範例：

/* 宣告一個變數 initialState 並存放 State ： value 的初始值為 0 */
const initialState = { value: 0 }

function counterReducer(state = initialState, action) {
/* 若此 action ： counter/increment 有被觸發的話就執行 return 內的行為 */
  if (action.type === 'counter/incremented') {
    return {
      ...state,
      /* 並在這邊更新複製的 State 值 +1 */
      value: state.value + 1
    }
  }
  return state
}

Store

在 Redux 套件中儲存我們整個應用程式中的 State 的地方，而且整個應用程式中只會有一個 Store 物件。

我們會使用 Redux 套件中的 createStore 的方法來幫我們先建立一個全新的 Store 來存放 State 的值，再將我們需要存入此 Store 的內容（包含了 action 和 reducer 這兩個物件）匯入到這個 Store 當中。

備註：通常我們會在專案內建立個別的目錄來分別存放 action 、 reducer 和 store 等資料，這邊會需要載入的就是在 reducer 資料夾所建立的一個 rootReducer 。

import { createStore } from 'redux';
import rootReducer from './rootReducer';

const store = createStore(
  rootReducer
);

Dispatch

在 Redux 中唯一可以修改 Store 內所儲存到 State 值的方式就是將一個設定好的 Action 物件傳入到此方法內。

/* 將一個 type: 'counter/incremented' 的 action 物件傳入 dispatch 方法內 */
store.dispatch({ type: 'counter/incremented' })
/* 印出 store 內目前 state 最新被該 action 物件所修改過的值 */
console.log(store.getState())

關於 Redux 的功能還有它的核心概念就先為大家介紹到這了。我覺得 Redux 的章節真的比前面都要複雜一些，不單只是較多的功能和方法，最主要的原因是出在我並沒有實際使用 Redux 做開發，所以這些理論跟功能實在是有吸收但不曉得有沒有真的理解了哈哈。

所以下面這邊我想給大家提供幾篇前輩大大們的鐵人文章，裡面針對 Redux 的實際應用還有其他更進階的功能介紹。我個人是希望自己有實作並使用過後再來學習更進階的 Redux 使用方法，大大們的文章為大家整理如下：