1 Redux 概述

Redux 是一個用于 JavaScript 應用的可預測狀態管理庫，主要用于管理應用中的全局狀態。它通過集中化的狀態存儲和嚴格的更新規則，使狀態變化更加可控和可追蹤。以下是 Redux 的核心概念、工作原理及特點：

---

1.1 核心概念

1. 單一數據源（Single Source of Truth）
   所有狀態存儲在一個 Store 對象中，形成狀態樹（State Tree）。這簡化了狀態的讀寫和調試。
2. 狀態只讀（State is Read-Only）
   唯一修改狀態的方式是觸發 Action（一個描述“發生了什么”的普通對象）。確保狀態不會被隨意修改。
3. 純函數修改（Changes with Pure Functions）
   通過 Reducer 函數處理 Action，返回新狀態。Reducer 是純函數（輸入確定，輸出確定，無副作用）。

---

1.2 基本組成

1. Store

   • 保存全局狀態的容器。
   • 通過 createStore(reducer) 創建（現代推薦使用 @reduxjs/toolkit 的 configureStore）。
   • 提供 getState() 獲取狀態、dispatch(action) 觸發更新、subscribe(listener) 監聽變化。

2. Action

   • 一個包含 type 字段的普通對象，描述發生了什么事。
   • 可攜帶額外數據（如 payload）。

   const incrementAction = { type: 'INCREMENT', payload: 1 };
   

3. Reducer

   • 接收當前狀態和 Action，返回新狀態。
   • 必須是無副作用的純函數。

   function counterReducer(state = 0, action) {switch (action.type) {case 'INCREMENT':return state + action.payload;default:return state;}
   }
   

---

1.3 工作流程

1. 用戶觸發操作（如點擊按鈕）。
2. 應用 派發（Dispatch）一個 Action（例如 { type: 'INCREMENT' }）。
3. Redux 調用 Reducer，根據 Action 類型計算新狀態。
4. Store 更新，所有訂閱了狀態變化的組件重新渲染。

redux數據流如下圖所示：

---

1.4 中間件（Middleware）

• 用于擴展 Redux 功能，處理異步操作或副作用（如 API 請求）。

• 常用中間件：redux-thunk（處理異步）、redux-saga（復雜異步流）、redux-logger（日志記錄）。

• 示例（使用 redux-thunk 發起異步請求）：

  const fetchData = () => {return (dispatch) => {dispatch({ type: 'FETCH_START' });fetch('/api/data').then(res => res.json()).then(data => dispatch({ type: 'FETCH_SUCCESS', payload: data })).catch(error => dispatch({ type: 'FETCH_ERROR', error }));};
  };
  

---

1.5 適用場景

• 復雜的大型應用，多個組件依賴同一狀態。
• 需要跟蹤狀態變化歷史（如時間旅行調試）。
• 跨組件、頁面或路由的狀態共享。

---

1.6 優缺點

優點

• 狀態集中管理，易于調試（結合 Redux DevTools）。
• 嚴格的更新模式確保可預測性。
• 豐富的中間件生態。

缺點

• 模板代碼較多（可通過 Redux Toolkit 簡化）。
• 學習曲線較陡，尤其是異步處理。
• 可能對小型項目過于復雜。

---

1.7 Redux Toolkit（現代推薦）

Redux 官方提供的工具集，簡化 Redux 代碼：

• createSlice：自動生成 Action 和 Reducer。
• configureStore：集成中間件和 DevTools。
• createAsyncThunk：簡化異步操作。
  示例：

import { createSlice } from '@reduxjs/toolkit';const counterSlice = createSlice({name: 'counter',initialState: 0,reducers: {increment: (state) => state + 1,decrement: (state) => state - 1,},
});export const { increment, decrement } = counterSlice.actions;
export default counterSlice.reducer;

---

1.8 與其他工具的對比

• Context API：適合簡單場景，但缺乏 Redux 的中間件、調試工具和性能優化。
• MobX：基于響應式編程，更適合追求簡潔的小型項目。
• Zustand：輕量級，API 更簡單，適合中等復雜度應用。

---

1.9 總結

Redux 通過嚴格的單向數據流和集中化狀態管理，解決了復雜應用的狀態混亂問題。盡管需要編寫一定模板代碼，但結合 Redux Toolkit 和中間件，它仍是大型 React 應用狀態管理的可靠選擇。對于簡單場景，可優先考慮輕量方案（如 Context API 或 Zustand）。

2 todoList 待辦事項案例

狀態todoList.tx代碼如下：

import { createSlice, PayloadAction } from "@reduxjs/toolkit";
import { nanoid } from "nanoid";export type TodoItemType = {id: string;title: string;completed: boolean;
};const INIT_STATE: TodoItemType[] = [{ id: nanoid(5), title: "吃飯", completed: false },{ id: nanoid(5), title: "睡覺", completed: false },
];export const todoListSlice = createSlice({name: "todoList",initialState: INIT_STATE,reducers: {addTodo(state: TodoItemType[], action: PayloadAction<TodoItemType>) {return [...state, action.payload];},removeTodo(state: TodoItemType[], action: PayloadAction<string>) {return state.filter((todo) => todo.id !== action.payload);},toggleCompleted(state: TodoItemType[], action: PayloadAction<string>) {return state.map((todo) => {const { id, completed } = todo;if (id !== action.payload) {return todo;}return {...todo,completed: !completed,};});},},
});export const { addTodo, removeTodo, toggleCompleted } = todoListSlice.actions;export default todoListSlice.reducer;

store/index.ts擴展todoList模塊代碼如下：

import { configureStore } from "@reduxjs/toolkit";
import countReducer from "./count";
import todoListReducer, { TodoItemType } from './todoList'export type StateType = {count: number,todoList: TodoItemType
}export default configureStore({reducer: {count: countReducer,todoList: todoListReducer// 擴展其他模塊},
});

代辦頁面TodoList.tsx代碼如下所示：

import { FC } from "react";
import { useSelector, useDispatch } from "react-redux";
import {addTodo,removeTodo,TodoItemType,toggleCompleted,
} from "../store/todoList";
import { StateType } from "../store";
import { nanoid } from "nanoid";const TodoList: FC = () => {const todoList = useSelector<StateType>((state) => state.todoList) as TodoItemType[];const dispatch = useDispatch();function add() {const id = nanoid(5);dispatch(addTodo({id,title: `待辦事項-${id}`,completed: false,}));}function del(id: string) {dispatch(removeTodo(id));}function toggle(id: string) {dispatch(toggleCompleted(id));}return (<><p>todoList demo</p><div><button onClick={() => add()}>添加 todo</button></div><ul>{todoList.map((todo) => {const { id, title, completed } = todo;return (<likey={id}style={{ textDecoration: completed ? "line-through" : "" }}><span onClick={() => toggle(id)}>{title}</span>&emsp;<button onClick={() => del(id)}>刪除</button></li>);})}</ul></>);
};export default TodoList;

效果如下圖所示：

3 Redux開發者工具

Redux DevTools 是一個強大的瀏覽器開發者工具擴展，用于調試 Redux 應用的狀態變化。它提供了時間旅行調試、狀態快照查看、Action 追蹤等功能，極大簡化了復雜狀態管理的調試過程。以下是 Redux DevTools 的核心功能和使用指南：

---

3.1 核心功能

1. 實時狀態監控
   • 可視化查看整個 Redux Store 的狀態樹。
   • 支持展開/折疊嵌套對象，快速定位狀態字段。
2. Action 歷史追蹤
   • 記錄所有派發的 Action 及其觸發順序。
   • 顯示每個 Action 的 type 和 payload 信息。
3. 時間旅行調試（Time Travel）
   • 通過回放 Action 歷史，動態切換應用狀態到任意時間點。
   • 直接跳過或撤銷某個 Action，驗證狀態變化的正確性。
4. 狀態差異對比
   • 高亮顯示兩次狀態變更之間的差異（Diff 功能）。
5. 導入/導出狀態
   • 將當前狀態導出為 JSON 文件，方便共享或復現問題。
   • 導入外部狀態文件，快速還原調試場景。
6. 遠程調試
   • 支持跨設備調試（如手機端與電腦端同步狀態）。

---

3.2 安裝與配置

步驟 1：安裝瀏覽器擴展

• Chrome: Redux DevTools Chrome 擴展
• Firefox: Redux DevTools Firefox 擴展

步驟 2：配置 Redux Store

• Redux Toolkit（推薦）**:
  configureStore 已默認啟用 DevTools，無需額外配置。

  import { configureStore } from '@reduxjs/toolkit';const store = configureStore({reducer: rootReducer,middleware: (getDefaultMiddleware) => getDefaultMiddleware(),
  });
  

---

3.3 使用示例

1. 打開 DevTools

• 瀏覽器開發者工具 → 切換到 Redux 標簽頁。
  

2. 查看狀態樹

• 在 State 面板中瀏覽當前 Store 的完整狀態。

3. 追蹤 Action 歷史

• 在 Actions 面板中查看所有已派發的 Action，點擊任意 Action 查看其詳情和對應狀態快照。

4. 時間旅行調試

• 點擊 Action 列表中的某個條目，應用狀態會自動回退到該時間點。
• 使用 跳過（Skip） 或 撤銷（Revert） 按鈕手動控制狀態變更。

5. 導出/導入狀態

• 點擊 Export 導出當前狀態為 JSON 文件。
• 點擊 Import 導入外部狀態文件，快速恢復調試場景。

---

3.4 高級功能

1. Action 日志過濾

   • 通過關鍵字或正則表達式過濾特定 Action（如 FETCH_*）。

2. 鎖定狀態變更

   • 在調試時鎖定狀態，防止意外修改。

3. 遠程調試配置

   • 使用 remote-redux-devtools 包調試遠程設備或服務端渲染的應用：

     javascript

     復制

     下載

     import { composeWithDevTools } from '@redux-devtools/extension';
     const store = createStore(reducer,composeWithDevTools({ hostname: 'localhost', port: 8000 })
     );
     

---

3.5 常見問題

Q1: DevTools 不顯示數據？

• 確保正確配置了 Redux Store（如使用 composeWithDevTools）。
• 檢查是否安裝了瀏覽器擴展并啟用了 Redux 標簽頁。
• 確認應用實際使用了 Redux（如非 React 應用需手動連接）。

Q2: 生產環境如何禁用 DevTools？

• 通過環境變量動態關閉：

  javascript

  復制

  下載

  const composeEnhancers = process.env.NODE_ENV === 'development'? composeWithDevTools({ trace: true }): compose;const store = createStore(reducer, composeEnhancers(applyMiddleware(thunk)));
  

Q3: 支持其他狀態庫嗎？

• 支持部分兼容 Redux API 的庫（如 Zustand、Flux），但功能可能受限。

---

3.6 總結

Redux DevTools 是 Redux 開發者的必備工具，通過時間旅行調試和狀態可視化大幅提升開發效率。結合 Redux Toolkit 的默認集成，可以快速上手并應用于復雜應用的調試場景。

結語

?QQ:806797785

??倉庫地址：https://gitee.com/gaogzhen

??倉庫地址：https://github.com/gaogzhen

[1]Redux官網[CP/OL].

[2]Redux Toolkit官網[CP/OL].