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

八股文_React面试题 0 43

参考回答：

在 Redux 中，中间件是一个在 dispatch 和 reducer 之间处理 action 的机制。Redux 中间件允许我们对传递给 reducer 的 action 进行拦截、修改或增强。中间件的主要作用包括：日志记录、异步请求、错误处理等。

Redux 中间件如何拿到 store 和 action：

Redux 中间件是通过一个特定的 API 来获取 store 和 action 的。具体来说，Redux 中间件通过 storeAPI 和 next 来访问 store 和处理 action。

storeAPI：提供了访问 store.dispatch 和 store.getState 的能力。
next：是一个函数，用来调用下一个中间件或最终的 reducer。

中间件的工作流程：

接收 action：当 action 被 dispatch 时，它首先进入到中间件。
处理 action：中间件可以选择在 action 被传递到下一个中间件或 reducer 之前对其进行修改或拦截。
传递 action：如果中间件没有处理或者拦截 action，它会调用 next(action)，将 action 传递给下一个中间件或最终的 reducer。

详细讲解与拓展：

1. 如何定义一个 Redux 中间件：

Redux 中间件本质上是一个高阶函数，它接收 storeAPI（包含 dispatch 和 getState）并返回一个函数，这个返回的函数接收 next，然后返回一个函数，该函数接收 action。通过这种方式，您可以处理和修改 action，然后再将其传递到下一个中间件或 reducer。

中间件的基本结构：

const myMiddleware = storeAPI => next => action => {
  // 拦截并处理 action
  console.log('Dispatching action:', action);

  // 可以修改 action，或者直接将其传递给下一个中间件
  return next(action);
};

storeAPI 是一个对象，包含 dispatch 和 getState。
next 是传递给下一个中间件的函数，或者如果没有更多中间件，传递给 reducer。
action 是当前 dispatch 的动作。

2. 如何访问 `store` 和 `action`：

通过 storeAPI 可以访问到 store.dispatch 和 store.getState，这使得中间件能够在处理 action 的过程中读取当前的状态或重新调度新的 action。

例如，假设我们需要在 action 被 dispatch 后记录当前状态，可以在中间件中使用 storeAPI.getState() 来获取最新的状态。

const loggerMiddleware = storeAPI => next => action => {
  console.log('Current state:', storeAPI.getState());  // 获取当前状态
  console.log('Dispatching action:', action);         // 输出当前 action
  return next(action);  // 将 action 传递给下一个中间件或 reducer
};

3. 如何处理 action：

中间件可以通过几种方式来“处理”或修改 action：
– 修改 action：中间件可以在 next(action) 之前修改 action 对象。这是处理、扩展或增强 action 的常见做法。例如，您可以在 action 中添加额外的信息。

“`js
const addTimestampMiddleware = storeAPI => next => action => {
// 在 action 中添加时间戳
const actionWithTimestamp = { …action, timestamp: Date.now() };
return next(actionWithTimestamp);
};
“`

异步操作：中间件通常用于处理异步操作。例如，Redux 中的 redux-thunk 和 redux-saga 都是中间件，它们允许 action creator 返回一个函数或生成器，而不是普通的 action 对象。
redux-thunk 示例：
```
const thunkMiddleware = storeAPI => next => action => {
if (typeof action === 'function') {
  // 如果 action 是函数，则调用它并传入 dispatch 和 getState
  return action(storeAPI.dispatch, storeAPI.getState);
}

return next(action);  // 否则继续传递 action
};
```
这种方式允许 action creators 发起异步请求，然后在请求完成后 dispatch 一个新的 action。

4. 如何将中间件应用到 Redux：

在创建 Redux store 时，您需要通过 applyMiddleware 将中间件传递给 createStore。

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

const store = createStore(
  rootReducer,
  applyMiddleware(myMiddleware, loggerMiddleware, thunkMiddleware)  // 应用中间件
);

这里，applyMiddleware 可以接收多个中间件，按照顺序依次调用。

总结：

Redux 中的中间件通过 storeAPI 和 next 获取 store 和 action。中间件可以在 dispatch 和 reducer 之间处理 action，可以用于异步操作、日志记录、修改或扩展 action，以及执行其他副作用。中间件的强大功能使得 Redux 更加灵活和可扩展。