Redux 适合解决“跨页面、跨模块、可追踪”的共享状态问题，不适合把所有局部状态都集中到一个仓库里。

Redux 解决什么问题

更适合放入全局状态的内容：

• 当前登录用户
• 权限、菜单、租户信息
• 全局主题、国际化
• 跨页面缓存的数据
• 需要调试追踪的复杂状态流

不适合放进去的内容：

• 输入框临时值
• 弹窗开关
• 组件局部 hover / focus 状态

Redux 的核心数据流

Redux 的基本闭环是：

1. dispatch(action)
2. reducer 根据 action 计算新 state
3. store 持有状态树
4. React 组件订阅状态变化并重渲染

这套设计的价值是：

• 状态变化路径单一
• 日志、回放、调试更容易
• 中间件可以插入异步和副作用处理

现代 Redux 的推荐写法

今天更推荐使用 Redux Toolkit，而不是手写大量模板代码。

import {configureStore, createSlice} from '@reduxjs/toolkit';

const counterSlice = createSlice({
    name: 'counter',
    initialState: {value: 0},
    reducers: {
        increment(state) {
            state.value += 1;
        }
    }
});

export const {increment} = counterSlice.actions;

export const store = configureStore({
    reducer: {
        counter: counterSlice.reducer
    }
});

Selector 与派生数据

派生数据不要重复存储。优先通过 selector 从源状态中计算。

• 普通 selector：直接读取
• 记忆化 selector：避免重复计算

这也是知识架构中 reselect 存在的意义。

异步数据流

常见方案：

• redux-thunk：轻量，适合大多数异步请求
• redux-saga：适合复杂流程编排、取消、竞态控制
• RTK Query：适合以服务端数据为核心的项目

如果项目只是“请求接口 + 列表展示”，通常 RTK Query 或 React Query 一类工具会比手写 saga 更省成本。

历史生态理解

知识架构里提到过这些生态：

• redux-actions
• redux-promise
• redux-logger
• redux-persist
• connected-react-router
• dva
• mobx
• immutable

理解它们的价值更重要：

• 降模板代码
• 把异步、副作用、持久化、日志拆到独立层
• 用不可变数据提升可预测性

手写 Redux 时要掌握什么

即使项目里不手写实现，也建议掌握这几个底层点：

• createStore 做了什么
• subscribe 如何触发更新
• dispatch 如何推动状态流转
• combineReducers 如何组织状态树
• 中间件如何包装 dispatch

这些知识能帮助你理解 react-redux、redux-saga、dva 这类库的抽象边界。

何时不需要 Redux

以下场景通常先别上 Redux：

• 页面局部状态即可解决
• 组件层级不深，用 props 传递成本低
• 只是服务端数据读取，可直接使用数据请求库
• 团队没有约束能力，仓库会迅速变成“全局垃圾场”

实践建议

• 全局状态只存最少且稳定的共享信息
• 业务计算尽量放到 selector 或 service 层
• 异步请求和 UI 状态分层
• 不要把表单每个局部字段都塞进全局 store
• 优先掌握 Redux Toolkit，再回头理解历史生态

贡献者: Ra1n

上一页React Router

下一页服务端渲染