前言
redux-req-middleware 是一个方便开发者处理异步数据流（例如 API 请求或者 WebSocket 操作）的中间件。
通常情况下，Redux 要求应用中的所有数据和状态都以普通 JavaScript 对象的形式呈现。而做到这一点最简单的方式就是在 Action 的时候传递一个简单纯洁的 JavaScript 对象。但是，当进行异步操作时，这一方式可能会变得很困难。redux-req-middleware 正是为了解决这一个问题而生的。
在本篇文章中，我们将详细介绍 redux-req-middleware 的使用方法，以及为什么它很有用。
安装和配置
如果你已经有了一个使用 Redux 的项目，你可以直接通过 npm 安装 redux-req-middleware。
--- ------- --------------------
redux-req-middleware 的使用相对简单，只需要配置 middleware 并在创建 store 时启用即可。
------ - ------------ --------------- - ---- ------- ------ - ------------- - ---- ---------------------- ----- ----- - ------------ -------- ------------------------------ -
使用方式
创建一个可以执行 API 请求的 Action 并没有传统的 Redux Action 那样让人满意。传统的方式会将异步操作的 Action Creator 抽象成以下形式：
-------- ------------ -
------ ---------- --------- -- -
---------- ----- ------------------- --
------ --------------------------------------
--------- -- -----------
---------- -- -
---------- ----- -------------------- -------- - ---- - --
--
------------ -- -
---------- ----- -------------------- -------- - ----- - --
--
-
-可以看到，这个函数对于操作类型（STARTED、SUCCESS、FAILURE）和逻辑都有巨大的依赖性。为了保持这种抽象的 Action Creator 清晰和总结的，我们可以将其封装成一个函数。
-------- ----------------------------- -
----- -------- - -----------------
------ -
------ --------------------
-------- ----------------------
-------- ----------------------
-
--------- --------------------------
------
--------
-- -
------ -------- -- --
------
----- --------- -
--- -
----- -------- - ----- ---------------
-- ---------------- -
----- --- -----------------------
- ---- -
------ -------------
-
- ----- ------- -
----- --- --------------------
-
--
--
-我们现在有了一种创建可以用于 API 请求的 Action Creator 的方式，这种方式很清晰和无耦合。
----- ----- - ------------------------------------- ----- -------- - -------------------------- ------ -------- ---- -- ------------------------ --
我们可以将此 Action Creator 添加到组件并在触发时向 Redux Store 中发出 Action。
------------------- - ----- - -------- - - ---------- ---------------------- -
通过使用 redux-req-middleware，我们可以在 Action 中直接使用普通的 JavaScript 对象，而不必创建一个巨大的异步函数。我们所需做的就是将每一个 API 请求抽象成一个简单无耦合的对象。
----- --------------- - -
---- -
------- ------
---- ---------
------- -
----------- --
--------- ---
--
--
---------- ---------------------
---------- ---------------------
-这里的 req 对象描述了 API 调用的 HTTP 方法、请求 URL 和参数。回调方法 onSuccess 和 onFailure 都会在 API 调用成功或失败时被调用。
我们只需要向 Redux Store 中发出此请求对象的 Action：
-------------------------
此 Action 会经过 redux-req-middleware，并生成一个新的 Action 来指示请求是否成功、失败以及结果对象。
下面是解析结果并将其附加到 Redux store 的示例 Action：
-------- ----------- - --- ------- -
------ ------------- -
---- ---------------------
------ -------------------
--------
------ -----
-
-结语
我们已经掌握了如何在应用程序中使用 redux-req-middleware。使用中间件进行异步操作可以让我们的应用更清晰、更专注于业务逻辑。如果您还没有尝试过，我们强烈建议您使用它。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/6006734b890c4f727758376b