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

文章目录

1 Redux 概述

Redux 是一个用于 JavaScript 应用的可预测状态管理库，主要用于管理应用中的全局状态。它通过集中化的状态存储和严格的更新规则，使状态变化更加可控和可追踪。以下是 Redux 的核心概念、工作原理及特点：

1.1 核心概念

单一数据源（Single Source of Truth）
所有状态存储在一个 Store 对象中，形成状态树（State Tree）。这简化了状态的读写和调试。
状态只读（State is Read-Only）
唯一修改状态的方式是触发 Action（一个描述“发生了什么”的普通对象）。确保状态不会被随意修改。
纯函数修改（Changes with Pure Functions）
通过 Reducer 函数处理 Action，返回新状态。Reducer 是纯函数（输入确定，输出确定，无副作用）。

1.2 基本组成

Store
- 保存全局状态的容器。
- 通过 createStore(reducer) 创建（现代推荐使用 @reduxjs/toolkit 的 configureStore）。
- 提供 getState() 获取状态、dispatch(action) 触发更新、subscribe(listener) 监听变化。
Action
- 一个包含 type 字段的普通对象，描述发生了什么事。
- 可携带额外数据（如 payload）。
```
const incrementAction = { type: 'INCREMENT', payload: 1 };
```

Reducer

接收当前状态和 Action，返回新状态。
必须是无副作用的纯函数。

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

1.3 工作流程

用户触发操作（如点击按钮）。
应用 派发（Dispatch）一个 Action（例如 { type: 'INCREMENT' }）。
Redux 调用 Reducer，根据 Action 类型计算新状态。
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 (
            <li
              key={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 核心功能

实时状态监控
- 可视化查看整个 Redux Store 的状态树。
- 支持展开/折叠嵌套对象，快速定位状态字段。
Action 历史追踪
- 记录所有派发的 Action 及其触发顺序。
- 显示每个 Action 的 type 和 payload 信息。
时间旅行调试（Time Travel）
- 通过回放 Action 历史，动态切换应用状态到任意时间点。
- 直接跳过或撤销某个 Action，验证状态变化的正确性。
状态差异对比
- 高亮显示两次状态变更之间的差异（Diff 功能）。
导入/导出状态
- 将当前状态导出为 JSON 文件，方便共享或复现问题。
- 导入外部状态文件，快速还原调试场景。
远程调试
- 支持跨设备调试（如手机端与电脑端同步状态）。

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 高级功能

Action 日志过滤
- 通过关键字或正则表达式过滤特定 Action（如 FETCH_*）。
锁定状态变更
- 在调试时锁定状态，防止意外修改。

远程调试配置

使用 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？

通过环境变量动态关闭：