Redux通过单一store集中管理状态,以action触发、reducer纯函数计算新state实现可预测更新,结合中间件处理异步与扩展,强调状态不可变性以优化性能。

Redux 是一个可预测的状态容器,用于 JavaScript 应用,尤其常见于 React 项目中。它通过集中管理应用状态,使状态变化更透明、可追踪。核心思想是将整个应用的 state 存储在一个单一的 store 中,通过纯函数(reducer)来描述状态如何响应 action 而变化。
单一数据源:Store 的设计原则
Redux 强调整个应用只有一个 store,包含所有状态。这个设计让调试更容易,也便于实现状态持久化和时间旅行调试。
创建 store 需要一个 reducer 函数:
- reducer 接收当前 state 和 action,返回新 state
- store 提供 getState() 获取当前状态
- dispatch(action) 触发状态更新
- subscribe(listener) 注册状态变化监听器
const store = createStore(rootReducer);
Action 与 Reducer:状态变更的唯一途径
在 Redux 中,任何状态更新都必须通过 dispatch 一个 action 来触发。action 是一个普通对象,必须包含 type 字段。
立即学习“Java免费学习笔记(深入)”;
SHCCMS(世惠诚企业网站管理系统)是南阳世惠诚科技有限公司负责开发的企业(公司)CMS网站内容管理系统。 主要功能 针对世惠诚企业网站管理而进行开发,该软件可以进行网站制作流程,客户案例,服务器参数,品牌设计,网站建设,新闻动态等操作。软件正在不断扩展应用接口,完善系统数据维护功能。系统还具有数据回收站机制。能对数据进行回收和撤回操作。软件界面设计简洁,美观。其人性化的软件
- type 表示动作类型,通常为字符串常量
- payload 可选,携带数据信息
- reducer 根据 action.type 决定如何计算新状态
- reducer 必须是纯函数,不能修改原 state,只能返回新对象
{ type: 'ADD_TODO', payload: { id: 1, text: 'Learn Redux' } }
中间件机制:扩展 dispatch 功能
Redux 提供 middleware 机制,在 action 发出后、到达 reducer 前插入额外逻辑。常用于处理异步操作、日志记录等。
- applyMiddleware 将中间件链应用到 store
- 常见中间件有 redux-thunk(支持异步 action)、redux-saga(复杂副作用管理)
- 中间件结构为函数嵌套,形成高阶函数链
const store = createStore(rootReducer, applyMiddleware(thunk));
状态不可变性与性能优化
Redux 要求 state 是不可变的。每次更新都应返回新的引用,便于对比变化和提升组件渲染效率。
- 避免直接修改 state,使用展开运算符或工具库如 immer
- 结合 React-Redux 的 useSelector 时,确保 selector 返回最小必要数据
- 使用 reselect 创建记忆化 selector,避免重复计算
return { ...state, todos: [...state.todos, action.payload] };
基本上就这些。Redux 的设计强调可预测性和可维护性,虽然有一定学习成本,但在大型应用中能有效管理复杂状态流。关键是理解 store、action、reducer 三者协作机制,以及如何通过中间件拓展能力。不复杂但容易忽略的是保持 reducer 纯净和 state 不可变。









