如何自定义实现 Redux 中间件 - 前端面试题

在Redux中，中间件是一种强大的机制，允许开发者在action被发送到reducer之前插入自己的逻辑。创建自定义的Redux中间件涉及到编写一个函数，该函数按照Redux中间件API的规格返回一个满足特定签名的函数。

我将向您展示如何自定义实现一个简单的日志中间件，该中间件的作用是在action被派发时在控制台输出日志信息。

以下是自定义Redux中间件的基本步骤：

编写一个函数，该函数接收store的dispatch和getState方法。
该函数返回一个接收下一个中间件的next函数的函数。
返回的函数再返回一个接收action的函数。
在最内层的函数体内，可以执行自定义的逻辑，然后调用next(action)将action传递给链中的下一个中间件或reducer。

下面是一个自定义日志中间件的例子：

javascript
// 自定义日志中间件
const loggerMiddleware = store => next => action => {
  // 自定义的逻辑：在当前action被处理之前输出日志
  console.log('dispatching', action);

  // 调用链中的下一个中间件或reducer
  let result = next(action);

  // 自定义的逻辑：在action被处理后输出新的状态
  console.log('next state', store.getState());

  // 返回result，因为middleware的链需要从next(action)获取返回值
  return result;
};

export default loggerMiddleware;

在上述的中间件代码中：

store: Redux store实例，它包含了dispatch和getState方法。
next: 是一个将action传递给链中下一个处理者（中间件或reducer）的函数。
action: 是当前正在处理的action对象。

使用这个中间件的典型方式是在创建Redux store时应用它：

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

// 使用applyMiddleware来增强store，添加自定义的loggerMiddleware
const store = createStore(
  rootReducer,
  applyMiddleware(loggerMiddleware)
);

export default store;

在这个例子中，任何派发到store的action都会先经过loggerMiddleware这个中间件，在控制台输出action信息，然后继续沿中间件链传递，直到最终被reducer处理。

这只是自定义中间件的一个简单例子，但您可以根据需要在中间件中实现更复杂的逻辑，例如异步操作、路由导航或其他您想要的任何自定义行为。