使用 Redux 管理应用的状态和行为是现代前端开发中的重要实践。其次还有一个重要的概念——"Middleware"，它作为 Redux 的强大扩展，在开发中扮演着至关重要的角色。在本篇文章中，我们将深入探究 Redux Middleware 的作用和使用方法，并提供优秀的示例代码，希望能够帮助你更好的理解和使用 Redux。
什么是 Middleware
简单来说，Middleware 是一种函数，它可以拦截（intercept）、观察（observ）和修改（modify） Redux Store 的动作流程。比如，当我们使用 Redux 完成一个动作时，Middleware 可以访问 Store 中的状态，可以调用其他 API 或操作数据。我们可以把 Middleware 看作一个围绕 Redux 的 Truck （卡车），Cargo （货物）的中间线，提供了访问 Store 状态，观察和修改数据的能力（图示）。
要使用 Middleware，我们需要了解 Redux 的三种基本结构（State，Action 和 Reducer） 以及 redux 库的核心概念（Dispatch 和 Store）。
Middleware 如何工作
在 Redux 应用程序中，Middleware 是一个统一、易于维护的方式，可以在 Action 到达 Reducer 之前截获它们，并执行自定义的逻辑。在该过程中，我们可以做不少事情，如打印日志、调用 API、修改指定 Action 的负载等，还有在异步流程中派发新的 Action。
在 Redux 应用程序中，中间件是按顺序排列的，最常见的方式是将它们串成一个链，将 Action 从一个中间件传递到下一个中间件，直到最终调用 Reducer。以下是示意图：
下图中，我们可以清楚地看到 Middleware 是如何运行的。FlowChart 组件产生一个 Action，Middleware 捕获了它，然后执行 console.log。接下来，将 Action 传递给下一个中间件处理。
Middleware 如何编写
要编写 Middleware，我们需要一个 dispatch 函数、一个 store，一些 被称为 next 的回调函数（可以访问该dispatch函数，并在下一个Middleware 中调用它）。以下是一个使用延时函数进行打印的中间件示例。
const loggerMiddleware = store => next => action => {
setTimeout(() => console.log(`Action "${action.type}" triggered.`), 1000)
return next(action)
}在此示例中，loggerMiddleware 函数具有 store、next 和 action 三个参数。store 参数以解构形式传递，将 Store 实例作为参数为 loggerMiddleware 函数的目的是可以访问 Store 的状态以解析数据。因为我们定义了一个名为 loggerMiddleware 的变量来保存这个函数，所以我们现在可以在我们的应用程序代码中调用它。
例如，如果你使用了 Redux 的【redux-logger】插件，则可以传递以下对象：
-- -------------------- ---- -------
----- ------------ - - ---------- --- --------- -- -
----- ----------- - ------ - ------------- ------- -- -
------ ------------- -
---- --------------
------ - --------- --------------------- -------------------- -
--------
------ -----
-
-
----- ----- - ------------
------------
---------------------------------
-Middleware 中的常见技巧
通过使用 Middleware，我们可以将其包装成一个独立的函数，并在多个应用程序和合适的情况下使用。以下是一些常见场景。
为 Action 加载队列
当生成一个特定的 Action 时，有时我们需要发起一个 AJAX 请求，等待响应并请求数据的任何后续数据，然后再返回响应的 Action（如“更新用户信息”可以触发“加载购物车内容”）。下面是一个从API获取GitHub用户身份二进制头像（avatar）的示例代码。
-- -------------------- ---- -------
----- --------------------- - -- -- ---- -- ------ -- -
-- ------------ --- ----------------------- -
----------------------------------------------------------------
-------------- -- ----------------
---------- -- -
----- - ---------- - - ----
------ ------------------------------- -- -----------------------
--
------------ -- -
----------------------- ---- ---------
------ - ---------- -------- - ------------------ ------ - -
--
------------------- -- --------------------
------------ -- ---------------------
- ---- -
------ ------------
-
-在此示例中，fetchAvatarMiddleware 确认 Action 的类型是否是 REQUEST_USER_SUMMARY，然后完成两次 API 请求，将用户存储在 Store 中，最后更新 Store 来存储下载的 avatar，更新后的 Action返回给 next。
打印状态更改记录
当关注调试时，我们需要知道某个派发的 action 改变了什么。下面是一个简单的记录状态变更的示例。
const storeReporterMiddleware = store => next => action => {
console.group(action.type)
console.info('dispatching', action)
const result = next(action)
console.log('next state', store.getState())
console.groupEnd()
return result
}在此示例中，storeJournalMiddleware 将 next 函数包装起来，然后记录 Action 的类型、负载、匹配的 Reducer，执行 result，并将 Store 的新状态记录到输出中。
为 Action 增加 Promise 功能
在应用程序中添加 Promise 功能时，Middleware 可能会非常有用。以下示例代码使用 Promise 对象将返回的 Promise 处理函数添加到 Store 中。
-- -------------------- ---- -------
----- --------------------- - -- -- ---- -- ------ -- -
----- - -------- ----- ------- - - ------
-- ---------- -
------ ------------
-
----- ------- - -----------------
----- ------- - -----------------
----- ------- - -----------------
------ -------- ----- ------- --
------ -------------
-------- -- ------ -------- --------- ----- ------- ---
----- -- ------ -------- ------ ----- ------- --
-
-在此示例中，bindPromiseMiddleware 会在 action 参数中查找一个 promise 属性。如果找到，则它既不返回 NOR 调用 next 函数。相反，它在 Store 中新增一个 pending action 来标识 action 在 Store 中发生的事情。然后，它使用 Promise 对象来处理成功或失败的结果，并在相应的场景下重新调用 next。
简单示例
下面是一个结合了中间件和异步操作的示例。
首先，我们定义一个普通的 Action：
-- -------------------- ---- ------- ----- ------------------ - -------------------- ----- ------------------ - -------------------- ----- ------------------ - -------------------- ----- ---------- - --------- -- -- ----- -------------- ------- -- ----- -------------- - ------- -- -- ----- ------------------- ----- -- ----- ---------------- - ------ -- -- ----- ------------------- -------- ----- --
接着，我们定义一个使用 Redux Thunk 异步中间件的功能函数：
-- -------------------- ---- -------
----- --------- - ---------- -- ---------- --------- -- -
----- ----- - ----------
----- ---- - -------------------------
-- ------ -
------ ----
-
---------- ----- ------------------- -------- - -------- - --
------ -------------------------------------------------
---------------- -- ----------------
------------ -- -
----- - ------ ----------- --------- ---------------- - - ----
---------
------------------
--------- ------
-----------
---------
-----------------
--
-
------ ----
--
-------------- -- -
-------------------------------
----- -----
--
-其中，fetchUser 函数在请求 GitHub 用户的基本信息时触发，并在获取成功后将其更新到应用程序的 Store 中。请注意，fetchUser 采用了 getState 方法来检查 Store 中是否已经有了当前要获取的用户的数据。
最后，我们定义中间件：
-- -------------------- ---- -------
----- ---------------- - ------- -- ------ -- -------- -- -
--------------------------
--------------------------- -------
----- ------ - ------------
----------------- ------- -----------------
------------------
------ ------
-
----- --------------- - -- --------- -------- -- -- ------ -- -------- -- -
-- ------- ------ --- ----------- -
------ ---------------- ---------
-
------ ------------
-
----- ----- - ------------
-------------------------
-------------------------------- -----------------
-在这个应用程序中，我们使用了多种不同的 Middleware 支持异步访问、调试和相关操作。在从 Repo 获取用户的 Avatar、地点和 repositories_url 之后，我们将数据添加到 Store 中。这意味着我们可以轻松地执行 Store 中的任何操作，例如从缓存中检索或从 Store 中检索某些特定的数据。
结论
Redux Middleware 是扩展和加强 Redux Store 的强大工具集。理解 JSX 和用数个 Middleware 串起来是非常重要的。本文提供了简单、但有深度、有新颖示例的技能。希望这篇文章能够帮助你更好地了解 Redux Middleware 的定义方式、一些常见技巧、及其签名。如果你想在真实应用程序中解决更加复杂的问题，了解 Redux Middleware 知识肯定是非常有帮助的。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67078243d91dce0dc86974c0