0

0

状态管理_Redux中间件原理

夜晨

夜晨

发布时间:2025-11-27 17:15:22

|

315人浏览过

|

来源于php中文网

原创

Redux中间件通过三层函数结构拦截action,在dispatch前后插入日志、异步等逻辑,利用compose形成洋葱模型,从左到右执行进入流程,再逆序返回,从而增强dispatch而不改变store本身。

状态管理_redux中间件原理

Redux 中间件的核心作用是扩展 Redux 的功能,让开发者可以在 dispatch action 的前后插入自定义逻辑,比如处理异步操作、打印日志、崩溃报告等。理解中间件的原理,关键在于搞清楚它如何“拦截”action 并增强 store 的 dispatch 方法。

Redux 中间件的基本结构

一个 Redux 中间件本质上是一个函数,它遵循三层嵌套的结构:

({ getState, dispatch }) => next => action => {
  // 自定义逻辑
  return next(action);
}

这三层分别代表:

  • 第一层:接收 store 的 getStatedispatch,可以访问状态或派发新 action
  • 第二层:接收原始的 next(下一个中间件或最终的 reducer 处理)
  • 第三层:接收当前的 action,在这里可以执行副作用或修改流程

中间件如何拦截 action

Redux 在创建 store 时通过 applyMiddleware 将中间件链式组合。每个中间件都包裹下一个中间件,形成一个从外到内的调用链。

当调用 store.dispatch(action) 时,实际调用的是被层层包装后的 dispatch 函数。action 会依次经过每个中间件的处理,最后才到达 reducer。

以日志中间件为例:

const logger = ({ getState }) => next => action => {
  console.log('dispatching:', action);
  const result = next(action);
  console.log('next state:', getState());
  return result;
};

它在 action 被处理前后打印信息,但不阻断流程,只是“观察”并放行。

实现异步支持:thunk 中间件原理

Redux 默认只接受普通对象类型的 action。要支持异步,需要中间件如 redux-thunk 来识别函数类型的 action。

同徽B2B电子商务软件 V46
同徽B2B电子商务软件 V46

同徽B2B电子商务软件是国内第一个基于J2EE架构的电子商务商业程序,在国内同类软件中市场占有率位居第一。目前客户分布二十多个省份,三十几个行业,直接和间接服务500万企业,其中包括多家部级单位和世界500强企业:商务部、农业部、德赛集团、宝钢集团、江苏龙华集团、深圳中农股份、中集集团等。 。 网站参数管理运营商可对整个网站进行灵活的配置,适应不同的运营需求网站更新将信息生成静态页面,加快浏览速

下载

thunk 的核心逻辑非常简单:

const thunk = ({ dispatch, getState }) => next => action => {
  if (typeof action === 'function') {
    return action(dispatch, getState);
  }
  return next(action);
};

如果 action 是函数,就调用它,并传入 dispatch 和 getState;否则正常传递给下一个环节。这样就可以在函数中延迟 dispatch 或进行 API 请求。

中间件的执行顺序与 compose

多个中间件通过 compose 组合,执行顺序是从左到右。例如:

applyMiddleware(thunk, logger)

action 先进入 thunk,再进入 logger。但在返回阶段(即 next 调用之后),则是反过来的:先从 logger 返回,再回到 thunk。

这种洋葱模型使得每个中间件都能在 action 流程的“进入”和“返回”两个阶段执行逻辑。

基本上就这些。Redux 中间件通过高阶函数的方式,巧妙地增强了 dispatch,既保持了 Redux 的纯净性,又提供了强大的扩展能力。不复杂但容易忽略细节。

相关专题

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

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

178

2024.05.11

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

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

214

2025.12.18

c++ 根号
c++ 根号

本专题整合了c++根号相关教程,阅读专题下面的文章了解更多详细内容。

17

2026.01.23

c++空格相关教程合集
c++空格相关教程合集

本专题整合了c++空格相关教程,阅读专题下面的文章了解更多详细内容。

22

2026.01.23

yy漫画官方登录入口地址合集
yy漫画官方登录入口地址合集

本专题整合了yy漫画入口相关合集,阅读专题下面的文章了解更多详细内容。

91

2026.01.23

漫蛙最新入口地址汇总2026
漫蛙最新入口地址汇总2026

本专题整合了漫蛙最新入口地址大全,阅读专题下面的文章了解更多详细内容。

124

2026.01.23

C++ 高级模板编程与元编程
C++ 高级模板编程与元编程

本专题深入讲解 C++ 中的高级模板编程与元编程技术,涵盖模板特化、SFINAE、模板递归、类型萃取、编译时常量与计算、C++17 的折叠表达式与变长模板参数等。通过多个实际示例,帮助开发者掌握 如何利用 C++ 模板机制编写高效、可扩展的通用代码,并提升代码的灵活性与性能。

14

2026.01.23

php远程文件教程合集
php远程文件教程合集

本专题整合了php远程文件相关教程,阅读专题下面的文章了解更多详细内容。

65

2026.01.22

PHP后端开发相关内容汇总
PHP后端开发相关内容汇总

本专题整合了PHP后端开发相关内容,阅读专题下面的文章了解更多详细内容。

59

2026.01.22

热门下载

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

精品课程

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

共21课时 | 2.9万人学习

MySQL 教程
MySQL 教程

共48课时 | 1.9万人学习

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

Copyright 2014-2026 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号