Redux 进阶篇：中间件-JavaScript中文网-JavaScript教程资源分享门户

Redux 是一个流行的 JavaScript 状态管理库。在使用它时，我们可能需要在数据流中添加一些中间件来处理异步操作、记录日志或修改 action。

本文将介绍 Redux 中间件的概念、它们的作用、如何编写自定义中间件，并提供一些示例代码供读者参考。

中间件是什么？

中间件是一个对 Redux action 进行处理的函数。它可以截获 dispatch，接收一个 action 对象并返回一个新的 action 对象或一段处理逻辑。

Redux 的 middleware 是一个函数，它接受三个参数：store、next 和 action：

const myMiddleware = store => next => action => {
  // 处理逻辑
  return next(action);
};

store： Redux store 对象。
next：一个函数，它可以将 action 传递给下一个中间件。
action：触发的 action 对象。

中间件可以访问 store 的 state 和方法，因此可以修改 state 或传递其它 action 给下一个中间件。它还可以触发异步操作，如 AJAX 请求。

中间件的作用

中间件的作用是在 Redux 核心功能之外添加额外的功能，如：

1. 处理异步操作

在 Redux 中处理异步操作通常需要用到 Redux Thunk 或 Redux Saga，它们都是中间件。它们允许我们使用 action 创建函数来触发异步操作。

const fetchUsers = () => {
  return dispatch => {
    dispatch({ type: 'FETCH_USERS_START' });
    fetch('/api/users')
      .then(res => res.json())
      .then(users => {
        dispatch({ type: 'FETCH_USERS_SUCCESS', payload: users });
      });
  };
};

2. 记录日志

中间件可以记录 action、state 或其它信息，以便后续调试。Redux 提供了一个官方中间件 redux-logger，可以很容易地启用日志记录功能。

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

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

3. 修改 action

middlewares 可以截获 dispatch 并修改 action，如添加时间戳或其它属性。

const addTimestamp = () => next => action => {
  return next({
    ...action,
    timestamp: Date.now()
  });
};

编写自定义中间件

编写自定义中间件通常需要按照以下步骤：

创建一个 middleware 函数，这个函数会返回一个带有 store、next 和 action 参数的“柯里化”函数。
在函数的主体中，对 action 进行处理，要么返回一个新的 action，要么执行异步操作等等。
如果没有返回一个新的 action，应该将 action 传递给 next 函数，来继续处理。

下面是一个简单的自定义中间件示例，它会在每个 action 中添加一个随机数作为 payload：

const addRandom = store => next => action => {
  const newAction = { ...action, payload: Math.random() };
  return next(newAction);
};

const store = createStore(
  reducer,
  applyMiddleware(addRandom)
);

总结

中间件使 Redux 可以扩展其能力，处理异步操作、记录日志等。创建自定义中间件非常简单，只需要返回一个函数即可。中间件的实现方式和应用领域非常广泛，读者可以根据自己的需求编写自己的中间件。

来源：JavaScript中文网，转载请注明来源本文地址：https://www.javascriptcn.com/post/65a491f8add4f0e0ffcdfd11

Redux 进阶篇：中间件