讲师中心 微信公众号
AI工具推荐 视频效率加速

JavaScript状态管理_Redux原理分析

大晨姑娘_8131

大晨姑娘_8131

发布时间:2025-11-25 09:30:51

|

843人浏览过

|

来源于php中文网

原创

Redux的核心思想是通过单一状态树集中管理应用状态,所有状态变更必须通过reducer纯函数处理;state不可变,每次更新返回新对象;action描述变更意图,dispatch触发action后reducer计算新state;store提供getState、dispatch和subscribe方法,维护状态并通知更新;中间件如redux-thunk扩展dispatch支持异步操作,实现可预测的状态管理。

javascript状态管理_redux原理分析

Redux 的核心思想是将应用的所有状态集中存储在一个全局的、单一的状态树中,通过明确的规则来管理状态的变更。它不依赖于任何框架,但最常用于 React 应用中。理解 Redux 的原理,有助于我们更好地掌握前端状态管理的本质。

1. 单一状态树(Store)

Redux 将整个应用的状态保存在一个 JavaScript 对象中,这个对象称为 store。所有组件都可以访问这个 store,避免了层层传递 props 的麻烦。

store 有以下几个关键特性:

  • 整个应用只有一个 store 实例
  • state 是只读的,不能直接修改
  • 状态变更必须通过纯函数(reducer)来完成

2. 状态不可变性与 reducer

Redux 要求 state 是不可变的。每次状态更新都必须返回一个新的 state 对象,而不是修改原有对象。这是为了保证状态变化可预测、可追踪。

立即学习“Java免费学习笔记(深入)”;

reducer 是一个纯函数,接收两个参数:当前的 state 和一个描述“发生了什么”的 action,返回新的 state。

示例:
function counterReducer(state = { count: 0 }, action) {
  switch (action.type) {
    case 'INCREMENT':
      return { ...state, count: state.count + 1 };
    case 'DECREMENT':
      return { ...state, count: state.count - 1 };
    default:
      return state;
  }
}

注意:reducer 必须是纯函数,不能有副作用(如 API 调用、修改参数等)。

3. Action 与 dispatch

action 是一个普通的 JavaScript 对象,用来描述状态变更的意图。它必须包含一个 type 字段,表示动作类型。

  • 例如:{ type: 'INCREMENT' }
  • 也可以携带额外数据:{ type: 'SET_NAME', payload: 'Alice' }

要触发状态变更,需要调用 store 的 dispatch 方法:

Alibabacloud Sdk Client Initialization For Java
Alibabacloud Sdk Client Initialization For Java

在 Java 中初始化和管理阿里云 SDK客户端。包括单例模式、线程安全、endpoint 与 region 配置、VPC 终端节点、同步与异步等。

下载
store.dispatch({ type: 'INCREMENT' });

dispatch 接收 action 后,会将其传给 reducer,reducer 根据 type 计算出新 state,store 更新并通知监听器。

4. Store 的实现机制

Redux 的 store 是通过 createStore 函数创建的。其内部维护着当前 state,并提供 getState、dispatch、subscribe 等方法。

简化版 createStore 实现:

function createStore(reducer) {
  let state;
  let listeners = [];
<p>function getState() {
return state;
}</p><p>function dispatch(action) {
state = reducer(state, action);
listeners.forEach(listener => listener());
}</p><p>function subscribe(listener) {
listeners.push(listener);
return () => {
listeners = listeners.filter(l => l !== listener);
};
}</p><p>// 初始化 state
dispatch({ type: '@@redux/INIT' });</p><p>return { getState, dispatch, subscribe };
}</p>

这就是 Redux 最核心的运行机制:通过 dispatch 触发 reducer,生成新 state,并通知所有订阅者更新。

5. 中间件与异步处理

默认情况下,Redux 只支持同步操作。如果需要处理异步逻辑(如网络请求),就需要引入中间件。

常见的中间件有 redux-thunk、redux-saga、redux-observable 等。

以 redux-thunk 为例,它允许 dispatch 函数形式的 action:

const fetchUser = () => {
  return async (dispatch) => {
    dispatch({ type: 'FETCH_USER_START' });
    const user = await api.getUser();
    dispatch({ type: 'FETCH_USER_SUCCESS', payload: user });
  };
};

中间件本质上是对 dispatch 的增强,可以在 action 发出前后插入自定义逻辑。

基本上就这些。Redux 的设计哲学是“可预测的状态管理”,通过限制状态变更的方式,使调试、测试和时间旅行变得可能。虽然现代 React 更倾向于使用 useReducer 和 Context 或更轻量的 Zustand 等工具,但理解 Redux 原理依然对构建大型应用很有帮助。

热门AI工具

更多
超级简历WonderCV

一款AI办公效率工具,主要用于免费求职简历模版下载制作,应届生职场人必备简历制作神器,适合需要提升相关任务效率的用户。

WorkBuddy

一款AI办公效率工具,主要用于腾讯云推出的AI原生桌面智能体工作台,适合需要提升相关任务效率的用户。

DeepSeek

DeepSeek是一款面向对话、写作、编程和推理场景的AI大模型工具。

AionClaw
AionClaw Hot

AionClaw是一款面向办公、创作和编程任务的AI桌面智能体。

UpDream
UpDream Hot

一款AI视频创作工具,主要用于哔哩哔哩推出的自研AI视频创作工具,适合需要提升相关任务效率的用户。

讯飞智作

讯飞智作是一款AI视频创作工具,AI文本配音工具,数字人课程、营销视频制作。

切问学术

切问学术是一款AI论文写作工具,复旦大学NLP团队推出的AI学术智能体。

豆包大模型

豆包大模型是一款由字节跳动推出的企业级大语言模型服务平台。

LibLibAI
LibLibAI Hot

一款AI视频创作工具,主要用于国内领先的AI创意平台,以海量模型、低门槛操作与“创作-分享-商业化”生态,让小白与专业创作者都能高效实现图文乃至视频创意表达,适合需要提升相关任务效率的用户。

相关专题

更多
什么是中间件
什么是中间件

中间件是一种软件组件,充当不兼容组件之间的桥梁,提供额外服务,例如集成异构系统、提供常用服务、提高应用程序性能,以及简化应用程序开发。想了解更多中间件的相关内容,可以阅读本专题下面的文章。

569

2024.05.11

Golang 中间件开发与微服务架构
Golang 中间件开发与微服务架构

本专题系统讲解 Golang 在微服务架构中的中间件开发,包括日志处理、限流与熔断、认证与授权、服务监控、API 网关设计等常见中间件功能的实现。通过实战项目,帮助开发者理解如何使用 Go 编写高效、可扩展的中间件组件,并在微服务环境中进行灵活部署与管理。

584

2025.12.18

ThinkPHP中间件机制与请求拦截处理实践
ThinkPHP中间件机制与请求拦截处理实践

本专题围绕 ThinkPHP 中间件体系展开,深入讲解中间件的定义、注册与执行流程。内容包括全局中间件与路由中间件的区别、请求前后处理逻辑、自定义中间件开发以及权限验证与日志处理应用。通过实际案例,帮助开发者掌握中间件在项目中的核心作用与最佳实践。

398

2026.03.31

Buffalo框架数据库开发全教程
Buffalo框架数据库开发全教程

本专题围绕Buffalo框架数据库开发,讲解database.yml多环境配置、soda与fizz迁移生成回滚、模型结构体标签、增删改查与条件查询、一对多与多对多关联、数据校验、回调钩子、事务处理及原生SQL执行能力。

80

2026.09.23

Buffalo框架路由与请求处理实操指南
Buffalo框架路由与请求处理实操指南

本专题讲解Buffalo框架路由与请求处理机制,涵盖路由注册与分组、资源路由、Handler编写规范、Context上下文方法、参数绑定、中间件编写挂载、Session与Cookie读写、Flash消息及错误页面定制方法。

40

2026.09.23

Buffalo框架零基础入门教程
Buffalo框架零基础入门教程

本专题整理Buffalo框架入门内容,涵盖Go环境准备、buffalo CLI安装、新项目生成、目录结构说明、dev热加载启动、数据库连接配置与常见报错排查,帮助新手按约定优于配置的思路跑通第一个Buffalo框架应用。

20

2026.09.23

Conan创建软件包配方指南
Conan创建软件包配方指南

本专题介绍通过conanfile.py创建软件包的方法,讲解包名、版本、依赖和构建设置等基础信息,以及source、build、package、package_info等常用方法的作用及编写思路。

20

2026.09.22

Conan二进制包配置指南
Conan二进制包配置指南

本专题介绍Conan根据操作系统、编译器、架构和构建类型生成二进制包的方法,讲解Profile、Settings、Options及Package ID的作用,帮助管理不同平台和编译环境下的包版本。

40

2026.09.22

Conan私有仓库搭建教程
Conan私有仓库搭建教程

本专题系统的讲解Conan私有仓库的搭建流程,涵盖仓库服务部署、存储目录配置、用户认证、权限划分和远程地址添加,并介绍内部C++依赖包的上传、下载及版本维护方法。

40

2026.09.22

热门下载

更多
网站特效
/
网站源码
/
网站素材
/
前端模板

精品课程

更多
相关推荐
/
热门推荐
/
最新课程
React 教程
React 教程

共58课时 | 12万人学习

国外Web开发全栈课程全集
国外Web开发全栈课程全集

共12课时 | 1.4万人学习

关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号
PHP中文网订阅号
每天精选资源文章推送

Copyright 2014-2026 https://www.php.cn/ All Rights Reserved | php.cn