redux-create-fetcher 是一个基于 Redux 的异步数据请求包，它使用了 async/await，通过 action 和 reducer 管理和更新异步数据状态。它是一个轻量级的库，使用简单，非常适合于前端数据处理和管理的场景。在这篇文章中，我将为大家介绍如何使用 redux-create-fetcher 进行数据请求管理。
安装
通过 npm 安装 redux-create-fetcher：
npm install redux-create-fetcher
使用
redux-create-fetcher 有 3 个关键部分：action、reducer 和 fetcher。
action
fetcher 默认返回 Promise，可以使用 Promise 的形式，也可以使用 async/await 异步处理数据。
action 分为请求开始、请求成功和请求失败 3 中状态，对应的 action 分别为：
- FETCH_START：开始请求
- FETCH_SUCCESS：请求成功
- FETCH_FAILURE：请求失败
你可以根据你的实际情况进行设置。
-- -------------------- ---- -------
------ ----- ---- -----------------------
-- ------ ----
------ ----- ----------- - --------------
------ ----- ------------- - ----------------
------ ----- ------------- - ----------------
-- ------ ----
------ ----- --------- - -- --
-------
---- ------------
------- ------
------------ -
------------
--------------
--------------
--
---reducer
reducer 主要负责处理异步状态，通过处理 FETCH_START、FETCH_SUCCESS 和 FETCH_FAILURE 三种数据请求状态，从而改变 state 中的值。
-- -------------------- ---- -------
------ - ------------ -------------- ------------- - ---- ------------
-- ------- -----
----- ------------ - -
----- ---
-------- ------
------ -----
--
-- -------
------ ------- -------- ----------------- - ------------- ------- -
------ ------------- -
---- ------------
------ - --------- -------- ---- --
---- --------------
------ - --------- -------- ------ ----- -------------------- ------ ---- --
---- --------------
------ - --------- -------- ------ ----- --- ------ -------------------- --
--------
------ ------
-
-fetcher
fetcher 主要提供网络请求的实现，在这个函数内可以使用平常的异步请求方法，也可以使用第三方的网络请求库。
-- -------------------- ---- -------
------ ----- ---- --------
------ -------- -------- ----- -
------ -------------- - ------- ---- ---
-
------ -------- --------- ----- -
------ --------------- ------
-
------ -------- ---------------- -
----- - ---- ------- ---- - - --------
------ -------- -
---- ------
------ -------- ------
---- -------
------ --------- ------
--------
------ -----
-
-调用
在组件内使用 useSelector 选择需要的数据进行渲染。
-- -------------------- ---- -------
------ - ------------ ----------- - ---- --------------
------ - --------- - ---- ------------
-------- ----- -
----- -------- - --------------
------------ -- -
----------------------
-- ------------
----- - ----- -------- ----- - - ------------------- -- ------------
------ -
-----
-------- -- ------------------
------ -- -----------------------
----
---------------- -- -
--- ------------------------------
---
-----
------
--
-
------ ------- ----示例代码
以上是 redux-create-fetcher 的简单使用展示。你可以通过这个库来非常方便地进行数据请求管理。下面是完整的使用示例代码。
-- -------------------- ---- -------
-- ----------
------ ----- ---- -----------------------
-- ------ ----
------ ----- ----------- - --------------
------ ----- ------------- - ----------------
------ ----- ------------- - ----------------
-- ------ ----
------ ----- --------- - -- --
-------
---- ------------
------- ------
------------ -
------------
--------------
--------------
--
---
-- ----------
------ - ------------ -------------- ------------- - ---- ------------
-- ------- -----
----- ------------ - -
----- ---
-------- ------
------ -----
--
-- -------
------ ------- -------- ----------------- - ------------- ------- -
------ ------------- -
---- ------------
------ - --------- -------- ---- --
---- --------------
------ - --------- -------- ------ ----- -------------------- ------ ---- --
---- --------------
------ - --------- -------- ------ ----- --- ------ -------------------- --
--------
------ ------
-
-
-- ----------
------ ----- ---- --------
------ -------- -------- ----- -
------ -------------- - ------- ---- ---
-
------ -------- --------- ----- -
------ --------------- ------
-
------ -------- ---------------- -
----- - ---- ------- ---- - - --------
------ -------- -
---- ------
------ -------- ------
---- -------
------ --------- ------
--------
------ -----
-
-
-- ------
------ - ------------ ----------- - ---- --------------
------ - --------- - ---- ------------
-------- ----- -
----- -------- - --------------
------------ -- -
----------------------
-- ------------
----- - ----- -------- ----- - - ------------------- -- ------------
------ -
-----
-------- -- ------------------
------ -- -----------------------
----
---------------- -- -
--- ------------------------------
---
-----
------
--
-
------ ------- ----结尾
redux-create-fetcher 是一个非常好用的异步请求管理库，它结合了 Redux 和 async/await 的优势，可以轻松帮助前端开发者进行数据请求管理。希望这篇文章的介绍对你有所帮助。如果你有任何问题或建议，请在评论区留言。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60067007e361a36e0bce8a99