前言
Redux 是一种非常流行的前端状态管理工具，但处理异步函数还是比较麻烦的。redux-promise-procedures 是一个彻底解决异步 redux action 函数的库，它可以简化 redux 异步操作，并让您的代码更具有模块化和重用性。
在本篇文章中，我们将介绍如何安装和使用 redux-promise-procedures，以及说明它如何工作和为什么可以使您的代码高效和易于维护。
安装
首先我们需要安装 redux-promise-procedures。在项目中使用以下命令安装：
--- ------- ------------------------
基本用法
让我们来看看如何使用 redux-promise-procedures：
Step 1：创建过程
redux-promise-procedures 希望所有的异步函数都被描述为一个过程。使用 redux-promise-procedures，你可以创建一个过程：
------ - --------------- - ---- ---------------------------
----- -------- - -----------------
----- --------------
-------- -
---- -------------------------
-
---createProcedure 方法接收一个对象作为参数，该对象指定 action 的类型（type），以及需要传递给 XMLHttpRequest 的配置对象（payload）。
具体来说，payload 包含以下属性：
- url：请求的 URL
- method：请求的 HTTP 方法，默认为 GET
- headers：请求的 headers
- body：请求的 request body
- responseType：请求的 response type
Step 2：处理过程
现在有了上面的过程，我们需要在 Redux 中处理它。redux-promise-procedures 添加了一个 reducer，该 reducer 会根据在 payload 中指定的 URL 发出 HTTP 请求。在请求的生命周期中，该 reducer 将生成自动化的 redux action。以下是如何处理操作的实现：
------ - ---------------- - ---- --------------------------- ----- ------- - --------------------- ----- ----- - ---------------------
redux-promise-procedures 提供了一个名为 handleProcedures 的工具函数，它创建一个 reducer，该 reducer 处理 redux-promise-procedures 所有的过程。
Step 3：发起过程
要发起过程，只需执行下面的代码：
---------------------------
执行此代码后，redux-promise-procedures 将根据指定的 URL 发出HTTP请求，并在请求的完整生命周期中处理它。然后，根据该操作的状态，它将自动生成与操作状态对应的 redux action。
高级用法
在上面的步骤中，我们演示了 redux-promise-procedures 的基本用法。下面将介绍一些高级用法。
异常处理
当请求响应返回一个非 2xx 的状态时，redux-promise-procedures 将自动将错误信息添加到最终生成的 action 中。可以通过检查 action.error 属性来处理错误。
---------------------------------- -- -
----- ----- - -----------------
--------------- -
------------------- -----------------
-
---组合多个过程
处理多个过程时，我们可以使用 combineReducers 来将它们组合起来。
------ - ---------------- ----------- - ---- --------
------ - ---------------- - ---- ---------------------------
----- -------- - -----------------
----- --------------
-------- -
---- -------------------------
-
---
----- -------- - -----------------
----- --------------
-------- -
---- -------------------------
-
---
----- ------- - -----------------
----------- ------------------
---------
--------
--
---
----- ----- - ---------------------结论
redux-promise-procedures 让处理异步 redux action 从麻烦的手动模式变得简单并且自动化。同时，它可以让你的代码变得更具备模块化和重用性。我们建议在您的下一个 Redux 项目中使用它，并享受它为您提供的好处。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/6006734d890c4f72775837be