Redux 是一个非常流行的 JavaScript 应用程序状态管理库，让数据在应用程序中传递变得更加容易。Redux 提供了一种可预测性的方式来管理数据，从而实现更好的代码组织和可扩展性。随着 Redux 的普及，许多 Redux 相关的工具和扩展也开始流行起来。其中一个流行的 Redux 扩展库是 redux-api-petitioner，它提供了一种简单的、基于 Promise 的 API，使得使用 Redux 和 RESTful API 变得更加容易和直观。
简介
redux-api-petitioner 是一个 Redux 扩展库，它允许您将自己的 API 请求和响应和 Redux store 绑定起来。使用 redux-api-petitioner，您可以轻松地将 API 请求转换为 Redux action，将 API 响应转换为 Redux reducer。这样，您可以将 API 请求和响应的数据存储在 Redux store 中，并在 React 组件中轻松地使用这些数据。
安装
要安装 redux-api-petitioner，您可以使用 npm：
npm install redux-api-petitioner
或者使用 yarn：
yarn add redux-api-petitioner
使用
首先，您需要为 Redux store 创建一个 API 请求：
import { createRequest } from "redux-api-petitioner";
const request = createRequest({
endpoint: "https://api.example.com/items",
method: "GET",
});然后，您需要在 Redux 中定义一个 action，以触发该 API 请求：
-- -------------------- ---- -------
----- ------------------- - ----------------------
----- ------------------- - ----------------------
----- ------------------- - ----------------------
-------- ------------ -
------ -
----- --------------------
----- -
---- --------
--
--
-
-------- --------------------------- -
------ -
----- --------------------
-------- --------------
--
-
-------- ------------------------ -
------ -
----- --------------------
-------- ------
--
-在上面的代码中，我们定义了三个 action：FETCH_ITEMS_REQUEST、FETCH_ITEMS_SUCCESS 和 FETCH_ITEMS_FAILURE，分别表示 API 请求的开始、成功和失败。在 fetchItems() action 中，我们将 API 请求的相关信息存储在 meta 属性中。
接下来，我们需要定义一个 reducer 处理我们的 action：
import { combineReducers } from "redux";
import { reducer } from "redux-api-petitioner";
const itemsReducer = combineReducers({
items: reducer(FETCH_ITEMS_REQUEST, FETCH_ITEMS_SUCCESS, FETCH_ITEMS_FAILURE),
});在上面的代码中，我们使用了 Redux 的 combineReducers 函数，将我们的 reducer 和 redux-api-petitioner 提供的 reducer 合并了起来。
最后，在您的 React 组件中，您可以使用以下代码触发 API 请求：
-- -------------------- ---- -------
------ - ------- - ---- --------------
------ - ---------- - ---- ------------
----- --------- ------- --------------- -
------------------- -
----- - ---------- - - -----------
-------------
-
-------- -
----- - ----- - - -----------
-- ------ ----- -------
-
-
-------- ---------------------- -
------ -
------ ------------
--
-
------ ------- ------------------------ - ---------- --------------在上面的代码中，我们导入了我们在之前定义的 fetchItems() action，并将它作为一个 mapDispatchToProps 函数，通过 connect 函数将它与 React 组件进行了绑定。然后，在 componentDidMount 生命周期方法中，我们调用了 fetchItems() action，触发了 API 请求，并将请求的结果作为 props 传递给 React 组件。
高级用法
除了基本的 API 请求，redux-api-petitioner 还提供了很多高级的功能，例如：
1. 缓存
使用 redux-api-petitioner，您可以轻松地设置缓存来提高应用程序的性能。您可以使用 cache 参数来指定缓存的时间（以秒为单位）：
const request = createRequest({
endpoint: "https://api.example.com/items",
method: "GET",
cache: 60,
});在上面的代码中，我们指定了一个 60 秒的缓存时间。
2. Swagger
如果您使用 Swagger 作为 API 的描述语言，redux-api-petitioner 也提供了很好的支持。您可以使用 fromSwagger 方法来自动创建 API 请求：
-- -------------------- ---- -------
------ - ----------- - ---- -----------------------
----- ------- - -------------
-------- ------
--------- --------------------------
------ -
--------- -
---- -
------------ -----------
--
--
--
---
--------------------- -- - --------- ------------------------------ ------- --- -在上面的代码中，我们传递了一个 Swagger API 定义到 fromSwagger 函数中，并从中获取了一个 API 请求。
结论
redux-api-petitioner 是一个非常强大且易于使用的 Redux 扩展库，它可以帮助您轻松地将 API 请求和响应与 Redux store 绑定起来。在本文中，我们介绍了 redux-api-petitioner 的基本使用方法，并探讨了一些高级用法。如果您正在使用 Redux 开发 JavaScript 应用程序，我们强烈建议您尝试一下 redux-api-petitioner。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005662a81e8991b448e2025