简介
redux-declarative-request 是一种基于 Redux 的简单方式来处理异步请求的 npm 包，它可以使得 Redux 管理异步请求变得更加容易，同时也提高了应用的性能和可读性。它提供了一个声明式的 API 来处理异步请求。
安装
在你的项目中使用 npm 来安装 redux-declarative-request 包：
npm install --save redux-declarative-request
如何使用
在你的应用程序中，你需要先创建一个 reducer 并将其放入你的应用程序中的任意位置。例如，我们为 /reducers/index.js 创建一个 reducer：
-- -------------------- ---- -------
------ - --------------- - ---- --------
------ - -------------- - ---- ----------------------------
----- ----------- - -----------------
-- ---- --- -------- -------- --
-------------------
-- ---- ------------- ------ --
---
---
------ ------- ------------然后，你需要在你的组件中，按照如下方式发起一个请求：
-- -------------------- ---- -------
------ - ------- - ---- ----------------------------
-- --- --
----- --------- - -- -- -
---------
----- ------------------
---- --------------------------------
---
--
-- --- --在这里，我们用于发起请求的 request 函数采用一个配置对象作为参数，其中 name 属性用于描述我们想要执行的请求的类型，url 属性指定了我们从哪里获取数据。
配置
在很多情况下，我们的请求需要额外的参数或者不同的 HTTP 方法、请求头或者 body 数据等。这个时候，我们就需要用到 redux-declarative-request 提供的配置对象：
-- -------------------- ---- -------
----------------
---------------- -
---- --------------------------------
------- ------
-------- -
--------------- -------------------
-------------- ------- -----------------
--
----- -
------- ---
----- ---
--
----- -
-------- ---
--
--
---在这里我们针对 'FETCH_USER_DATA' 这个请求进行了一些配置。url 指定了数据的来源，method 指定了 HTTP 方法（默认为 GET），headers 指定了 HTTP 请求的头信息，data 指定了请求的参数信息（默认为空对象）。最后，meta 提供了一个对象，用于在请求成功返回后向 reducer 传递一个额外的数据信息，让 reducer 根据这些附加信息进行更新。
响应
我们使用 redux-declarative-request 发起的请求，都会返回一个 Redux action，例如：
-- -------------------- ---- -------
-
----- --------------------------
-------- -
----- --- ---- -------- ---- ----
--
----- -
-------- -----
---------- --- -----------------
--
-SUCCESS_FETCH_USER_DATA 类型的 action 是用于表示成功获取了数据。除此以外，还有针对失败和取消请求的 action 类型，名称规则与成功的 action 类型类似，唯一的差别在于其在前面有一个 FAILURE_ 或者 CANCEL_ 前缀。例如，FAILURE_FETCH_USER_DATA 表示数据获取失败，CANCEL_FETCH_USER_DATA 表示请求被取消。
示例代码
最后，我们在下面提供一个 redux-declarative-request 的使用示例：
-- -------------------- ---- -------
------ ------ - --------- - ---- --------
------ - ------------ ----------- - ---- --------------
------ - --------------- ------- - ---- ----------------------------
----- --------------- - ------------------
----- ----------- - -----------------
-- ---- -------- -------- --
-------------------
------------------ -
---- ---------------------------------------------
------- ------
--
---
---
----- --- - -- -- -
----- -------- - --------------
----- -------- - ------------------- -- -----------------------------
------------ -- -
------------------ ----- --------------- ----
-- ----
------ -
----
--------- --
------------------- -- -
--- --------------
----------- --------------
-----
---
-----
--
--通过这个例子，我们可以看到当我们使用 redux-declarative-request 来处理异步请求时，我们可以把请求的状态保存在 Redux 正规化的状态树中，而无需记住异步请求的状态。
结论
redux-declarative-request 是一个非常实用的 npm 包，它使得 Redux 更加的易于处理异步请求。它提供了声明式的 API，允许我们在组件中轻松地调用异步请求，同时也使得我们的应用程序变得更加易于维护。
除此以外，它还提高了应用程序的性能，因为它可以将具有相似需求的请求归并到一起，从而优化大量请求的性能。所有这些都使得 redux-declarative-request 成为前端开发中的一次积极和有益的贡献。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005728081e8991b448e8b13