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