Redux通过单一状态树集中管理应用状态,确保状态只读并由纯函数reducer响应action进行更新,实现可预测的数据流控制。

Redux 是 JavaScript 应用中广泛使用的状态管理库,尤其在 React 项目中扮演着核心角色。它的设计思想源于 Flux 架构,但通过简化和规范化,提供了一种可预测的状态管理方式。理解 Redux 的核心原理,有助于我们更好地掌握复杂应用中的数据流控制。
单一状态树:整个应用的状态集中存储
Redux 最显著的特点是采用“单一状态树”(Single Source of Truth),即整个应用的所有状态都被保存在一个全局唯一的 store 中。这个 store 是一个普通的 JavaScript 对象,任何组件都可以访问其中的数据。
这种设计带来了几个优势:
- 状态集中管理,便于调试和追踪变化
- 避免组件间状态传递的复杂性
- 支持时间旅行调试(time-travel debugging)
状态只读:不能直接修改状态
在 Redux 中,状态是只读的。你不能通过赋值或调用方法来直接修改 store 中的状态。要改变状态,必须显式地 dispatch 一个 action。
立即学习“Java免费学习笔记(深入)”;
action 是一个描述“发生了什么”的普通对象,必须包含一个 type 字段,用于标识操作类型。
例如:
{ type: 'ADD_TODO', payload: '学习 Redux' }
这种方式确保了所有状态变更都是明确且可追踪的,不会出现隐式修改导致的 bug。
纯函数更新:reducer 负责状态转换
reducer 是一个纯函数,接收当前 state 和 action 作为参数,返回新的 state。它决定了状态如何根据 action 发生变化。
关键特性包括:
- 必须是纯函数:无副作用、相同输入始终返回相同输出
- 不能修改原 state,必须返回新对象以保证不可变性
- 常见的做法是使用展开运算符或 immer 等工具处理嵌套结构
示例 reducer:
const todoReducer = (state = [], action) => {
switch (action.type) {
case 'ADD_TODO':
return [...state, action.payload];
default:
return state;
}
};
三大原则总结与工作流程
Redux 的运行机制可以归纳为三大原则:
- 单一数据源:store 是唯一的
- 状态只读:只能通过 action 触发变更
- 使用 reducer 执行纯函数更新:确保状态变化可预测
工作流程如下:
- 组件触发 action(如用户点击按钮)
- store.dispatch(action) 将 action 发送到 store
- store 调用 root reducer,传入当前 state 和 action
- reducer 计算并返回新的 state
- store 更新内部 state,并通知所有订阅的组件重新渲染
基本上就这些。Redux 的强大之处在于其简洁的设计哲学——通过约束状态更新的方式,让应用行为更可控、更容易测试和调试。虽然现代开发中出现了更多轻量替代方案(如 Zustand、Redux Toolkit),但理解 Redux 原理依然是掌握前端状态管理的关键基础。










