在 React 项目中，Redux 是最常用的状态管理工具之一。Redux 的核心概念是 store，即一个状态容器，存储着应用程序中的所有状态。Redux 提供了许多 API 来更新和查询 store 中的状态，但是有时候这些 API 操作并不足够灵活。这时候，我们可以使用 Redux middleware 来增强 Redux 的功能。
什么是 Redux middleware
Redux middleware 是一个可以拦截 Redux 中间操作（Action、Thunk、Promise、Saga、Epic等）的函数。它可以在 action 发送到 reducer 之前或之后，对 action 或它的结果进行修改、延迟调用、记录日志等操作。
举个例子，我们想记录用户每个操作的时间戳，可以通过 middleware 实现这个功能。示例代码如下：
const timestampMiddleware = store => next => action => {
console.log(`[${new Date().toLocaleString()}] Action: ${action.type}`);
return next(action);
};
const store = createStore(reducer, applyMiddleware(timestampMiddleware));这个示例代码中，我们定义一个 timestampMiddleware 函数，它接收一个 Redux store 对象，并返回一个新函数，这个新函数再返回一个新函数，最终返回一个修改后的 action 对象，并将它传递给下一个 middleware 或 reducer。当应用程序分发一个 action 时，这个 action 将会经过我们定义的 middleware，middleware 会打印这个 action 的 type 和当前时间戳。
Middleware 是 Redux 的两个关键功能之一（另一个是样板代码的减少）。通过 middleware，我们可以在 Redux 的模式下，轻松地实现更多的功能，例如异步操作、路由控制等。
如何编写 Redux middleware
编写 Redux middleware 非常简单，我们只需要按照下面的格式编写函数即可：
const customMiddleware = store => next => action => {
// 在 action 到达 reducer 前后进行操作，例如：
console.log('Before action:', action);
const result = next(action);
console.log('After action:', result);
// 一定要返回一个和 action 相同类型的对象
return result;
}上述代码中，我们定义了一个 customMiddleware 函数，它接收 Redux store 对象作为参数，并返回一个新函数，这个新函数再返回一个新函数，并对 action 进行操作，最终再将结果传递给下一个 middleware 或 reducer。这个新函数有三个参数：
store：Redux store 对象next：把处理权交给下一个 middleware 或 reducer 的函数。在 applyMiddleware 函数中传递下一个 middleware 或最终的 reducer。如果没有下一个 middleware 或 reducer，则默认是 store.dispatch 函数。action：当前分发的 action 对象
接下来，我们来实现两个常用的 middleware：一个实现异步操作，一个实现日志记录。
实现异步操作
在 Redux 中，我们需要使用 Thunk 来实现异步操作。但是 Thunk 只支持普通函数，如果我们需要使用 Promise 或 generator 函数，则需要使用别的包或自己写 middleware。下面是一个使用 Promise 的异步操作 middleware：
-- -------------------- ---- -------
----- --------------- - ----- -- ---- -- ------ -- -
-- ------- ----------- --- ----------- -
------ ------------------
-
-- ------- ------ --- -------- -- ------ -------------- --- ----------- -
------ ----------------------------
-
-- ----- ------- --- --------------- ---------- - -------
------ -------------
--
-- ------- ----- --- --------------- ----- ----------
----- ----- - ------------
--------
--------------------------------
--
-- -----------
----------------
----- -------------
-------- -- -- -
------ --------------------------------- -- -----------------
-
---上述代码中，我们实现了一个 asyncMiddleware 函数，如果分发的 action 是 Promise，则直接返回 Promise.then(next)。如果分发的 action 是一个具有 promise 函数的对象，则返回 action.promise().then(next)。否则，则直接传递给下一个 middleware 或 reducer。
实现日志记录
这个 middleware 可以记录应用程序中所有 action 的类型和 payload。我们可以在开发环节中使用它，来调试应用程序代码。
-- -------------------- ---- ------- ----- ---------------- - ----- -- ---- -- ------ -- - --------------------------- --------------------------- -------- ----- ------ - ------------- ----------------- ------- ------------------ ------------------- ------ ------- -- -- ------- ----- --- --------------- ----- ---------- ----- ----- - ------------ -------- --------------------------------- --
上述代码中，loggerMiddleware 函数接收一个 Redux store 对象，并返回一个新函数，这个新函数再返回一个新函数，并在 console 中记录 action 的相关信息。
如何添加多个 middleware
我们可以使用 Redux 提供的 applyMiddleware 函数来添加多个 middleware。例如在上面的示例代码中，我们使用了 applyMiddleware 来添加 timestampMiddleware、asyncMiddleware 和 loggerMiddleware。
import { applyMiddleware, createStore } from 'redux';
// 示例代码，创建一个 Redux store
const store = createStore(
reducer,
applyMiddleware(timestampMiddleware, asyncMiddleware, loggerMiddleware)
);applyMiddleware 函数按照原始顺序链式调用 middleware。例如在上面的代码中，首先会调用 timestampMiddleware，再调用 asyncMiddleware，最后调用 loggerMiddleware。
结论
Redux middleware 增强了 Redux 的功能，使得我们可以更加灵活的管理 React 项目的状态。我们可以使用 Redux middleware，实现异步操作、日志记录、授权等多项功能。在下一个 React 项目中，试试使用 Redux middleware 吧！
参考文献
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/674a6065a1ce0063548a64ee