前言
Redux 是一个流行的 JavaScript 应用程序状态管理库。它提供了一种可预测的状态管理机制，使得应用程序更加可维护和可测试。Redux 的核心概念包括：store、action 和 reducer。其中，middleware 是在action 被 dispatch 前进行拦截并处理的增强类型机制。
本文将介绍 Redux middleware 的基本概念和开发模板，以及如何编写一个自定义的 Redux middleware。
Redux middleware 的基本概念
在 Redux 中，middleware 指的是一个函数，在 dispatch 每一个 action 前被执行，它可以拦截 action 并对其进行一些处理或转换，然后再传递给下一个 middleware 或 reducer。Redux 的 middleware 机制可以让我们对应用程序进行更加灵活的控制，使得应用程序更加可维护和可拓展。
Redux middleware 的功能包括以下几个方面：
- 日志记录和调试：用来记录每个 action 和状态变化。
- 异步处理：用来处理异步行为，比如网络请求和定时器。
- 路由控制：用来控制路由切换时的状态转换。
开发模板
Redux middleware 的开发模板非常简单。我们只需要编写一个函数，在这个函数中实现中间件的功能即可。该函数通常接收三个参数：store、next 和 action。其中，store 是 Redux store 对象，next 是下一个 middleware 或 reducer，action 是当前 action 对象。
下面是一个 middleware 的基本模板：
const myMiddleware = store => next => action => {
// 在这里实现 middleware 的功能
};我们可以看到，这段代码中定义了一个名为 myMiddleware 的函数，它接收一个 store 对象，返回一个函数，该函数又接收一个 next 函数，并返回一个新的函数，在这个新的函数中实现 middleware 的功能。
示例代码
下面是一个示例，我们将实现一个简单的 middleware，它会拦截所有的 action，并在 console 中输出 action 的类型和 payload。
const loggerMiddleware = store => next => action => {
console.log('dispatch action:', action.type);
console.log('payload:', action.payload);
next(action);
};
// 创建 store
const store = createStore(reducer, applyMiddleware(loggerMiddleware));在上面的代码中，我们定义了一个名为 loggerMiddleware 的 middleware，它会在 console 中输出每一个 action 的类型和 payload 并将 action 传递给下一个 middleware 或 reducer。
完整的示例代码如下：
-- -------------------- ---- -------
------ - ------------ --------------- - ---- --------
-- -- -------
----- ------------ - - ------ - --
----- ------- - ------ - ------------- ------- -- -
------ ------------- -
---- ------------
------ - --------- ------ ----------- - - --
---- ------------
------ - --------- ------ ----------- - - --
--------
------ ------
-
--
-- -- ----------
----- ---------------- - ----- -- ---- -- ------ -- -
--------------------- --------- -------------
----------------------- ----------------
-------------
--
-- -- -----
----- ----- - -------------------- -----------------------------------
-- -------- ------
---------------- ----- ----------- ---
---------------- ----- ----------- ---
---------------- ----- -------------- ---运行上面的代码，我们会在 console 中看到输出的日志：
dispatch action: INCREMENT payload: undefined dispatch action: DECREMENT payload: undefined dispatch action: UNKNOWN_TYPE payload: undefined
总结
Redux middleware 是一个非常强大的机制，它可以让我们对 Redux 应用程序进行更加灵活的控制。在本文中，我们学习了 Redux middleware 的基本概念、开发模板和示例代码。希望通过本文的学习，读者们能够理解 middleware 的基本概念，并能够编写自己的 custom middleware，加强对 Redux 应用程序的控制能力。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64716fb1968c7c53b0f4d746