状态管理_Redux中间件原理-js教程-PHP中文网

状态管理_Redux中间件原理

夜晨

发布： 2025-11-27 17:15:22

原创

284人浏览过

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

状态管理_redux中间件原理

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

Redux 中间件的基本结构

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

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

登录后复制

这三层分别代表：

第一层：接收 store 的 getState 和 dispatch，可以访问状态或派发新 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。

v4.6科美智能企业网站管理系统专业版(带手机版)

科美智能企业网站管理系统专业版是以asp+access进行开发的企业网站系统，软件还包含了全站生成静态页面的功能。特别提醒： 1.切勿用那些调试软件调试（比如：aspweb、NETBOX、小旋风等），如果您想本地运行源码，请参照赠品中的环境搭建教程。 2.切勿用免费空间（试用空间可以），因为免费空间一般没有写入权限，且会挂广告破坏程序，程序无法正常运行。 3.后台添加内容后，如果有的前台

108

查看详情

thunk 的核心逻辑非常简单：

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

登录后复制

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