Redux 是一個 JavaScript 狀態管理工具，經常與 React 搭配使用，來管理複雜的應用程式狀態。Redux 基於 Flux 架構並進行改良，透過將應用程式的所有狀態集中到一個單一的資料源 (Single Source of Truth) 中，讓應用程式的狀態更容易管理與追蹤。Redux 的運作流程主要圍繞以下幾個重要的概念：Actions、Reducers、Store、Dispatch 和 Selectors。

根據 React 進階 - 導入 Redux，讓元件溝通更簡潔 文章中的說明，Redux 的運作流程可以簡要歸納如下：

1. 定義可用的狀態：Redux 管理者事先定義好應用中可用的狀態，所有元件都共用這個單一資料源，確保狀態在應用中是一致的。
2. 設置修改規則 (Actions)：管理者也會事先定義修改狀態的規則 (即 Actions)，這些規則是 Redux 處理狀態變更的唯一途徑。
3. 對應狀態變更邏輯 (Reducers)：每個 Action 都對應到特定的邏輯運算 (Reducers)，這些 Reducers 根據不同的 Action 決定如何更新狀態。
4. 建立狀態容器 (Store)：Redux 將所有的狀態與對應的 Reducers 包裝成一個 Store，這個 Store 是應用的唯一狀態容器。
5. 透過 Provider 提供狀態：使用 Provider 元件，將 Redux 的 Store 提供給應用中的所有元件，讓它們可以取用或更新狀態。

Redux 操作的方式可以分為兩個主要步驟：

1. 取出狀態 (Selectors)：操作者可以使用 Selector 從 Store 中擷取所需的狀態，避免元件直接操作 Store，使邏輯更清晰。
2. 發送更新請求 (Dispatch)：當需要更新狀態時，操作者會透過 Dispatch 將對應的 Action 和參數 (Payload) 送出，由 Redux 的 Reducers 根據這些資訊更新狀態。

依照上述的流程說明，我們可以在任何地方取得state，而state也會透過預先訂定好的更新規則去更新。執行的狀況可參照下方的圖：

上圖引用自Redux官方文件

在 React 中使用

Redux 是一個功能強大的狀態管理工具，能夠幫助你在大型應用中有效管理複雜的狀態。
將一步步展示如何在 React 中整合 Redux 並進行狀態管理。

步驟 1：安裝 Redux 和 React-Redux

首先，讓我們在 React 應用中安裝必要的套件，使用以下命令：

npm install redux react-redux

• Redux：核心的狀態管理庫。
• React-Redux：將 React 與 Redux 綁定的工具，讓 React 組件能夠與 Redux store 互動。

步驟 2：定義 Reducer

建立一個簡單的計數器應用來示範 Redux 的使用。建立一個 reducers 資料夾後，再定義一個 counterReducer，來管理計數器的狀態：

// reducers/counterReducer.js
const initialState = {
  count: 0,
};

const counterReducer = (state = initialState, action) => {
  switch (action.type) {
    case 'INCREMENT':
      return {
        ...state,
        count: state.count + 1,
      };
    case 'DECREMENT':
      return {
        ...state,
        count: state.count - 1,
      };
    default:
      return state;
  }
};

export default counterReducer;

在這個 counterReducer 中，根據接收到的 action.type 來決定如何更新 state。INCREMENT 會將 count 增加 1，而 DECREMENT 則會將 count 減少 1。

接著，將這個 reducer 添加到 rootReducer 中：

// reducers/index.js
import { combineReducers } from 'redux';
import counterReducer from './counterReducer';

const rootReducer = combineReducers({
  counter: counterReducer,
});

export default rootReducer;

這裡使用 combineReducers 能夠將不同的 reducer 組合成一個 rootReducer。

步驟 3：設置 Redux Store

需要建立 Redux store 並將其與 React 應用整合：

// store.js
import { createStore } from 'redux';
import rootReducer from './reducers';

const store = createStore(rootReducer);

export default store;

這裡使用 createStore 創建 Redux store，並將 rootReducer 傳入。rootReducer 是所有 reducer 的集合。

步驟 4：連接 Redux Store 和 React 應用

我們將 Redux store 連接到 React 應用中，使用 Provider 將 store 傳遞給應用中的所有組件：

import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';
import { Provider } from 'react-redux';
import store from './store';

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <React.StrictMode>
    <Provider store={store}>
      <App />
    </Provider>
  </React.StrictMode>
);

Provider 是 React-Redux 提供的高階元件，將應用包裹在 Provider 中後，所有子組件都能夠存取 Redux store 中的狀態。

步驟 5：在 React 組件中使用 Redux

在 React 組件中，我們需要存取 Redux store 的狀態，並發送 actions 來更新狀態。這裡會用到兩個關鍵的 React-Redux hooks：useSelector 和 useDispatch。

1. useSelector：用來從 Redux store 中提取需要的狀態。這個 hook 接收一個選擇器函數作為參數，這個函數定義了從 store 中提取的資料：

   const count = useSelector((state) => state.counter.count);
   

   上述程式碼中，我們從 store 的 counter 狀態中提取 count 值。

2. useDispatch：用來發送動作（dispatch actions）到 Redux store。透過 useDispatch，我們可以觸發 reducer 來修改狀態：

   import { useDispatch } from 'react-redux';
   
   const dispatch = useDispatch();
   

   使用 dispatch 發送 action 來更新狀態，例如：

   const increment = () => {
     dispatch({ type: 'INCREMENT' });
   };
   
   const decrement = () => {
     dispatch({ type: 'DECREMENT' });
   };
   

   當呼叫 increment 或 decrement 函數時，Redux 會根據 action type 來更新 count 的值。

最後將上述的內容結合起來，會是的計數器組件：

// components/Counter.js
import React from 'react';
import { useSelector, useDispatch } from 'react-redux';

const Counter = () => {
  const count = useSelector((state) => state.counter.count);
  const dispatch = useDispatch();

  const increment = () => {
    dispatch({ type: 'INCREMENT' });
  };

  const decrement = () => {
    dispatch({ type: 'DECREMENT' });
  };

  return (
    <div>
      <h1>{count}</h1>
      <button onClick={increment}>Increment</button>
      <button onClick={decrement}>Decrement</button>
    </div>
  );
};

export default Counter;

計數器應用可以透過點擊按鈕來增減計數，並且 Redux store 中的狀態會隨之更新。

結論

Redux 是狀態管理工具，特別適合在大型應用中使用。Redux 能夠幫助你更好地管理複雜的應用狀態，減少開發過程中的混亂。如果你有更多需要狀態共享或需要追蹤狀態歷史的需求，Redux 會是一個不錯的選擇。

參考資料：

• 【Day.28】React進階 - 導入Redux，讓元件溝通更簡潔 - iT 邦幫忙::一起幫忙解決難題，拯救 IT 人的一天 (ithome.com.tw)
• Redux - A JS library for predictable and maintainable global state management | Redux

後記

本文將會同步更新到我的部落格

黃禎平 – Medium