前端

服务端

计算机基础

Redux 是一个流行的 JavaScript 状态管理库，主要用于管理复杂应用的状态。它由 Dan Abramov 和 Andrew Clark 创建，并受到了 Flux 架构的启发。Redux 的核心理念是维护一个单一的全局状态对象，所有的状态变更都通过一种叫做“action”的方式来描述，然后这些 action 会通过“reducer”函数来更新状态。

Redux

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

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

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

1. 编写一个函数，该函数接收`store`的`dispatch`和`getState`方法。
2. 该函数返回一个接收下一个中间件的`next`函数的函数。
3. 返回的函数再返回一个接收action的函数。
4. 在最内层的函数体内，可以执行自定义的逻辑，然后调用`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处理。

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

Redux面试题手册

如何自定义实现 Redux 中间件