前言
@cromwellian/redux-promise-middleware-actions 是一个方便的 Redux 中间件，它可以简化异步操作的处理，使 Redux 开发变得更加简单和高效。在这篇文章中，我们将深入了解这个 npm 包的使用方法，包括安装、配置、使用以及示例代码等方面。
安装
在使用 @cromwellian/redux-promise-middleware-actions 之前，需要先安装它：
npm i @cromwellian/redux-promise-middleware-actions --save
配置
为了让 Redux middleware 知道我们想要使用这个包，我们需要添加它到 Redux store 中。
-- -------------------- ---- ------- ------ - ------------ --------------- - ---- -------- ------ ----------------- ---- ------------------------------------------------ ------ ----------- ---- ------------- ----- ---------- - - -------------------- -- ----- ----- - ------------------------ --------------------------------
这段代码中，我们将 promiseMiddleware 添加到了 applyMiddleware 的中间件数组中。这样，在 Redux store 接收到一个执行异步操作的 action 后，promiseMiddleware 就会将其转换成三个 action：一个用于请求的、一个用于成功的和一个用于失败的。这使得我们可以更方便地处理这些 action，从而简化我们的 Redux 开发。
使用
现在，我们可以开始使用 @cromwellian/redux-promise-middleware-actions，处理 Redux 中的异步操作了。
下面是一个发送异步请求的 action 创建函数示例：
-- -------------------- ---- -------
------ ----- ---- --------
------ ----- ------------------ - ---------------------
------ ----- ------------------ - ---------------------
------ ----- ------------------ - ---------------------
----- ---------------- - -- -- -
------ -
----- -------------------
--
--
----- ---------------- - ------ -- -
------ -
----- -------------------
-------- -----
--
--
----- ---------------- - ------- -- -
------ -
----- -------------------
-------- ------
--
--
------ ----- --------- - -- -- -
------ ---------- -- -
-----------------------------
----------------
---------------- -- -
------------------------------------------
--
-------------- -- -
----------------------------------
---
--
--在这个示例中，我们创建了 fetchData action，该 action 发送 GET 请求，并在响应成功或失败时分别触发 fetchDataSuccess 和 fetchDataFailure action。
示例代码
下面是一个获取用户信息的完整示例代码：
-- -------------------- ---- -------
------ ----- ---- --------
------ ----------------- ---- ------------------------------------------------
------ ----- --------------------- - ------------------------
------ ----- --------------------- - ------------------------
------ ----- --------------------- - ------------------------
----- ------------------ - -- -- -
------ -
----- ----------------------
--
--
----- ------------------ - ------ -- -
------ -
----- ----------------------
-------- -----
--
--
----- ------------------ - ------- -- -
------ -
----- ----------------------
-------- ------
--
--
------ ----- ------------- - -- -- -
------ ---------- -- -
-------------------------------
----------------
---------------- -- -
--------------------------------------------
--
-------------- -- -
------------------------------------
---
--
--
----- ---------- - -
--------------------
--在上面的示例代码中，我们定义了三个不同的 action，分别处理发送请求、请求成功和请求失败的情况。当我们调用 fetchUserInfo action 时，promiseMiddleware 会自动将其转换成三个不同的 action，我们只需要在 Redux store 中定义 reducer 来处理这些 action 即可。
总结
@cromwellian/redux-promise-middleware-actions 是一个非常实用的 Redux 中间件，可以让我们更加轻松地处理异步操作。在本文中，我们介绍了该中间件的安装、配置、使用方法以及示例代码，希望能对读者有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60066b5451ab1864dac669be