redux-superapi 是一个基于 Redux 和 axios 的轻量级库，用于在 React 应用程序中管理异步 API 调用。它提供了简单明了的 API，帮助您更轻松地管理和协调 API 调用。
本文将详细介绍如何使用 redux-superapi 库，重点介绍以下内容：
- 安装和配置
- 如何定义和使用 superapi
- 使用 superapi 配合 Redux
- 常见用例示例代码
安装和配置
首先，您需要在项目中安装 redux-superapi 包：
--- ------- -------------- ------
然后，您需要将 superapi 添加到您的 Redux 存储中：
------ - ------------ ---------------- --------------- - ---- -------- ------ - -------------------- ---------- - ---- ----------------- ----- ----------- - ----------------- ---- ----------- --- ----- ----- - ------------ ------------ -------------------------------------- --
现在，您的 Redux 应用程序已经配置好了 redux-superapi 中间件，使得它可以在您的应用程序中使用。
如何定义和使用 superapi
redux-superapi 提供了一个名为 createApi 的函数，用于定义和创建 API 调用。您可以通过以下方式使用 createApi：
------ - --------- - ---- ----------------- ----- --- - ----------- -- --- ---- ---
api 对象返回一个具有多个方法的对象，用于管理 API 调用。最基本的选项是 endPoint，用于设置 API 根路由：
----- --- - ----------- --------- ----------------------- ---
此外，createApi 还提供了许多其他配置选项，例如设置请求和响应拦截器、设置全局请求参数等等。具体参见官方文档。
使用 api 对象，您可以调用各种 RESTful API 方法（GET、POST、PUT、DELETE 等）：
----- - ----- ------ --------- - - ----- ------------------
您也可以使用任何 axios 支持的请求参数：
------------------ - ----- ------- ------ --------------- -- - -------- - -------------- ------- --------- - ---
使用 superapi 配合 Redux
使用 redux-superapi，您可以将 API 调用的状态完全整合到您的 Redux 存储中，使您能够更好地管理和协调各个 API 调用。
首先，定义一个 Redux 存储，请使用正常的 Redux 的应用程序状态和 Reducer 与此同时，将 superapi 的 reducer 添加到您的存储中。
------ - ------------ ---------------- --------------- - ---- -------- ------ - -------------------- ---------- - ---- ----------------- ------ ----------- ---- ------------------------- ----- ----------- - ----------------- ----- ------------ ---- ----------- --- ----- ----- - ------------ ------------ -------------------------------------- --
然后，您可以使用您之前定义 createApi() 创建的 api 对象并将其添加到 Redux 中：
------ - --------------- - ---- ----------------- ------ ----- ---------- - ---------------------------- --------- -- ---- -------- -------------------------------
这将触发与 api.get("/users") 相同的调用，但由于 redux-superapi 管理状态，您现在可以轻松地更改 UI 以反映未来 API 调用的各种状态，并具有更好的可维护性。
要订阅状态更改并采取适当的措施，请使用 api.selectors 对象访问结果。
------ - ----------- - ---- -------------- ------ - ---------- - ---- ------------------------ ----- - ----- ------ --------- - - ---------------------------------- -- ----------- - -- ------ --- ------- -- - -- ------- - -- ------ --- ----- -- - -- ------ - -- ------ --- ---- ---- -
常见用例示例代码
GET 请求：
------ - --------- - ---- ----------------- ----- --- - ----------- --------- ----------------------- --- ------ ----- ---------- - ----------------------------------
POST 请求：
------ - --------- - ---- ----------------- ----- --- - ----------- --------- ----------------------- --- ------ ----- ---------- - -----------------------------------
在 React 中使用：
------ - ------------ ----------- - ---- --------------
------ - ---------- - ---- ------------------------
-------- ---------- -
----- -------- - --------------
----- - ----- ------ --------- - - ----------------------------------
------------ -- -
-------------------------------
-- ------------
-- ----------- -
------ ----------------------
-
-- ------- -
------ ----------- ----------------------
-
-- ------ -
------ -
-----
---------------- -- -
---- -------------------------------
---
------
--
-
------ -----
-结论
Redux-superapi 是一个非常强大且易于使用的库，可以轻松管理您的异步 API 调用。通过定义后端 API 的常用部分，配合组合中间件与 store，可以简化代码，更好地组合异步流程、状态管理和 UI 逻辑。如果您想进一步了解，请查阅官方文档，并在您的应用程序中使用 redux-superapi。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/6006700de361a36e0bce8c8a