简介
redux-load-api 是一个基于 Redux 的异步 API 调用模块。它可以帮助你统一管理你的 API 请求，串起你的异步请求状态和 Redux 的状态。
在这篇文章中，我们将会学到如何在 React 项目中使用 redux-load-api，包括它的配置、使用方法以及如何处理请求结果。
安装
redux-load-api 可以通过 npm 安装：
--- ------- ------ --------------
配置
在你的应用程序中，你需要通过创建一个模块配置来配置 redux-load-api。模块配置应该包含你的 API 请求以及它们的 reducer。
-- ------
------ - --------- - ---- -----------------
------ ------- -----------
-- ------
--------- -
---- -------------
--
-- ------
-------- -
---- -----------------
--
-- ----
----------- -
---- -------------
------- -------
--
-- ----
----------- -
---- -----------------
------- ---------
--
---使用
一旦你配置了你的 API，你可以使用 redux-load-api 的 api.call 方法来发出请求。 api.call 方法会返回一个 Promise 对象，你可以使用 .then() 和 catch() 方法来处理请求结果。
-- --------
------ ------ - --------- - ---- --------
------ - ------------ ----------- - ---- --------------
------ --- ---- --------
-------- ------- -
----- -------- - --------------
----- ----- - ------------------- -- -------------
------------ -- -
-------------------------------
-- ----
------ -
-----
-------------- -- ----------------------
------------ -- ----------- ----------------------------
---------------------- -- -
---- -------------------------------
---
------
--
-
------ ------- ------上面代码中，我们使用 useSelector Hook 来选择 Redux 中的 state，然后通过 dispatch 函数发出我们在 api.js 中定义的 getUsers 请求。
处理请求结果
当请求完成后，它将返回一个包含以下字段的 Redux action：
type: action 类型。payload: action 的数据(请求结果)。meta: action 的元数据。
你可以通过在 reducer 中处理 LOAD_API_SUCCESS 和 LOAD_API_FAILURE ActionType 来处理 Redux 中的状态。
-- ----------
------ --- ---- --------
------ ------- -------- ------------- - --- ------- -
------ ------------- -
---- ------------------------------------------
------ - --------- ------ - -------- ------ ----- -------------- - --
---- ------------------------------------------
------ - --------- ------ - -------- ------ ------ -------------- - --
--------
------ ------
-
-上面的代码中，我们在 reducer 中处理了 getUsers 请求，并根据请求的结果更新 Redux 中的状态。
总结
在本文中，我们学习了如何在 React 项目中使用 redux-load-api，它可以帮助我们统一管理 API 请求，并且方便地将请求的结果与 Redux 的状态管理在一起。这使得异步数据的管理变得更加容易和简洁。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/60067007e361a36e0bce8a81