npm 包 redux-saga-fetch-hook 使用教程

阅读时长 6 分钟读完

在前端开发中,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

纠错
反馈