在前端开发中，Redux 和 Saga 很常用，在网络请求场景中，使用 redux-saga-fetch-hook 可以更加方便地处理异步网络请求。本文将会详细讲解该 npm 包的使用。
什么是 redux-saga-fetch-hook
redux-saga-fetch-hook 是基于 redux-saga 和 react-hooks 的网络请求库，它可以让我们以更加直观的方式来处理网络请求，同时也简化了使用 redux-saga 和 react-hooks 的流程。
安装和使用
安装 redux-saga-fetch-hook：
--- ------- --------------------- ------
在 Redux 应用中配置/rootSaga.js，将 saga 中间件应用到 store 中：
------ - --------------- - ---- -------- ------ -------------------- ---- ------------- ------ -------- ---- ---------- ----- -------------- - ----------------------- ----- ----- - --------------------- -------------------------------- -----------------------------
在需要发送网络请求的组件中，我们可以使用 useFetchHook 来处理请求：
------ ----- ---- --------
------ - ------------ - ---- ------------------------
-------- ------------------ -
----- ------ -------- ------ - --------------
------ -
------------ ----------------
------------ ---------------
--
---- ---------------
-------- -
------- -----
--
--------- ----
---
------ -
-----
-------- -- ------------------
----- -- ------------------------------
------ -- -----------------------
------
--
-使用教程
useFetchHook
useFetchHook 是 redux-saga-fetch-hook 中最基本的 hook，用来发送请求和接收响应。
----- ------ -------- ------ - --------------
------ -
------------ ---------------- -- ----
------------ --------------- -- ----
--
---- --------------- -- --- --- --
-------- -
------- ----- -- ----
--
--------- ---- -- ---------- -----
---返回值：
- data：API 请求成功后返回的数据，如果请求失败或者还没有获得数据，它将返回 null。
- loading：布尔值，表示是否正在请求数据。
- error：如果请求失败，error 将保存从服务器接收到的错误消息。
Fetch缓存
当 useCache 为 true 时，第一次请求响应数据后，redux-saga-fetch-hook 会缓存请求结果。当这个请求被再次触发，且网络状态正确（例如再次触发可能只是滚动到底部或者进入页面，不必请求服务器）时，它会立即调用 resolve，并返回缓存的值。网络错误时不会调用 resolve，也不会使用缓存数据。
请求的状态控制
如果您想要更 granular 地控制其请求的状态，useFetchHook 提供了在开始请求和停止请求时触发回调的功能。这些回调可用于添加按需操作更改组件的状态。这些回调可以作为第三个参数传递给 useFetchHook options。
----- ------ -------- ------ - -------------
-
-- -------
--
-----
-
---------- -- -- ------------------ ----------
---------- -- -- ------------------ ----------
-------- -- -- --------------------
-
--示例代码
以下是一个简单的示例代码，它使用 redux-saga-fetch-hook 从 API 中获取数据并展示：
------ ----- ---- --------
------ - ----------- - ---- --------------
------ - ------------ - ---- ------------------------
-------- ------------------ -
----- -------- - --------------
----- ------ -------- ------ - --------------
------ -
------------ ----------------
------------ ---------------
--
---- ----------------
-------- -
------- -----
-
---
------------------ -- -
--------------- ----------------
-- ----
------ -
-----
-------- -- ------------------
----- -- --------------- ------ -- -
---- ------------
---------------------
---------------------
------
---
------ -- -----------------------
------
--
-总结
使用 redux-saga-fetch-hook 可以更好地处理 Redux 和 Saga 的异步网络请求，它提供了 useFetchHook、Fetch 缓存和请求的状态控制等功能。通过本文的学习，你可以更好地利用这个 npm 包。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/60066ffee361a36e0bce8a49