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

状态管理_Redux中间件原理

夜晨

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

原创

315人浏览过

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。

同徽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 请求。