0902Redux_状态管理-react-仿低代码平台项目

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].