跳到主要内容

简述Redux 中间件是怎么拿到store 和 action? 然后怎么处理 ？

参考答案：

Redux 中间件是一个用于处理 action 和 store 之间通信的高级功能。中间件允许您在派发（dispatch）action 和到达 reducer 之前插入自定义逻辑。这对于日志记录、异步操作、报告错误等非常有用。

在 Redux 中，中间件通过 applyMiddleware 函数与 store 关联。applyMiddleware 接受一个或多个中间件函数作为参数，并返回一个增强器（enhancer），该增强器在创建 store 时被应用。

下面是 Redux 中间件如何拿到 store 和 action，并对其进行处理的简要说明：

  1. 创建中间件函数：中间件是一个函数，它接受 store 的 dispatch 函数和 getState 函数作为参数。中间件函数返回一个新的 dispatch 函数，该函数会替换原始的 dispatch 函数。
const middleware = store => next => action => {
  // 在这里，您可以访问 store 和 action
  // store.getState() 可以获取当前的状态
  // action 是被派发的 action 对象

  // 在这里处理 action，例如异步操作

  // 调用 next(action) 以将 action 传递给下一个中间件或 reducer
  return next(action);
};
  1. 应用中间件：使用 applyMiddleware 函数将中间件应用于 store。您可以将多个中间件作为参数传递给 applyMiddleware，它们将按照从左到右的顺序执行。
import { createStore, applyMiddleware } from 'redux';
import rootReducer from './reducers';
import middleware1 from './middleware1';
import middleware2 from './middleware2';

const store = createStore(
  rootReducer,
  applyMiddleware(middleware1, middleware2)
);

  1. 处理 action：当中间件函数被调用时，它会收到当前的 dispatch 函数（可能是前一个中间件的 dispatch 函数）和 getState 函数。中间件可以执行自定义逻辑，例如处理异步操作、记录日志或报告错误。

    • 如果中间件需要处理异步操作，它可以在处理完异步操作后调用 dispatch 函数来派发新的 action。
    • 如果中间件需要更改或终止 action 的处理，它可以返回一个特殊值，如 Promise 或其他非 action 对象。这将阻止后续的中间件或 reducer 处理该 action。

  2. 传递 action：中间件函数通过调用 next(action) 将 action 传递给下一个中间件或 reducer。如果没有更多的中间件，那么 action 将最终到达 reducer，由 reducer 处理并更新状态。

总之，Redux 中间件通过在派发 action 和到达 reducer 之间插入自定义逻辑，提供了一种灵活的方式来扩展 Redux 的功能。通过访问 store 和 action，中间件可以执行各种操作，如异步操作、日志记录和错误报告。