React

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

参考答案：

Redux 中间件是一个强大的工具，它允许你在派发（dispatch）一个 action 到 store 之前或之后执行一些额外的代码。这对于日志记录、创建异步操作（如 API 调用）等非常有用。

Redux 中间件的工作原理可以总结为以下几步：

创建中间件: 中间件是一个函数，它接收 store 的 getState 函数作为第一个参数，并返回一个函数。这个返回的函数再接收 next 参数，并再次返回一个函数。这个最后的函数就是实际处理 action 的函数。

const middleware = storeApi => next => action => {
  // 在这里你可以访问到 store 和 action
  // 你可以根据需要对它们进行处理

  // 调用 next 函数以继续派发 action 到下一个中间件或 store
  return next(action);
};

应用中间件: 使用 applyMiddleware 函数来将中间件应用到你的 store 创建器上。applyMiddleware 函数接受一个或多个中间件作为参数，并返回一个新的 store 创建器。

import { createStore, applyMiddleware } from 'redux';
import rootReducer from './reducers';
import middleware from './middleware';

const store = createStore(
  rootReducer,
  applyMiddleware(middleware)
);

处理 Action: 当你派发一个 action 时，它首先会被传递给中间件。中间件可以决定是否要处理这个 action，或者是否要将它传递给下一个中间件或 store。

// 在中间件中
const middleware = storeApi => next => action => {
  if (typeof action === 'function') {
    // 处理异步 action
    return action(storeApi.dispatch, storeApi.getState);
  }

  // 继续派发 action 到下一个中间件或 store
  return next(action);
};

在上面的例子中，中间件检查 action 是否是一个函数。如果是，它假设这是一个异步 action，并允许它接收 dispatch 和 getState 作为参数。这使得你可以在异步操作中使用 Redux 的 API，并且可以在需要时更新 store 的状态。

总之，Redux 中间件通过插入到 action 派发和 store 更新之间的流程中，为开发者提供了一种强大的方式来扩展 Redux 的功能，并处理诸如异步操作、日志记录等任务。