npm 包 react-redux-fetch-extra 使用教程

阅读时长 6 分钟读完

简介

在前端开发中,经常需要获取远程服务器数据,例如使用 Ajax 或 fetch 发送异步请求。而在 React.js 应用中,我们经常使用 Redux 管理数据流,其中使用了 redux-thunk 进行异步数据获取。然而,在使用中我们发现,每个不同的数据请求,都需要编写大量的 boilerplate 代码,而在每个 Redux reducer 中重复编写逻辑也十分麻烦。因此,我们需要一个更好的解决方案:react-redux-fetch-extra。

react-redux-fetch-extra 是一个专为 React.js 应用而设计的 npm 包,它可以帮助我们更简便地处理异步数据请求,并灵活地控制数据获取过程。接下来,我们将介绍如何使用 react-redux-fetch-extra。

安装

在使用前,首先需要通过 npm 安装 react-redux-fetch-extra:

使用

我们将会以一个示例应用为例,来演示如何使用 react-redux-fetch-extra。

假设我们有一个需求:在 React.js 应用中,展示某个 Github 用户最新创建的 5 个项目,并且需要在用户使用应用时,每隔 10 秒更新数据。

1. 配置 fetch reducer

我们首先需要定义一个 Redux reducer 来控制数据的获取。可以在文件夹下创建一个名为 github.js 文件,作为我们的项目文件:

-- -------------------- ---- -------
------ - ---------------- - ---- --------------------------

----- ----------------- - ------------------
  ------------ -- -- --
    --------- ------------------------------------------------------------------------------------
  ---
---

------ ------- --------------------------
展开代码

在该 reducer 中,我们使用了 react-redux-fetch-extra 提供的 createFetchSlice 方法来创建一个用于处理异步请求的 reducer。在该方法中,我们需要提供一个 fetchConfig 函数,该函数返回一个对象,该对象用于配置 fetch 操作。

在该示例中,我们使用 Github API 来获取某个 Github 用户的最新创建的 5 个项目。我们可以指定 API endpoint 并附带需要的参数,例如 ?direction=desc 表示按照创建时间从新到旧排序。我们使用 getLatestProjects.reducer 导出该 reducer。

2. 配置 fetch action

我们需要定义一个 Redux action 来触发数据获取,从而更新展示,可以在 github.js 文件中添加以下代码:

3. 配置 fetch component

最后,我们需要在 React.js 组件中使用 fetch 数据,并展示给用户,可以在一个名为 GithubProjects.js 的文件中编写代码:

-- -------------------- ---- -------
------ ------ - --------- - ---- --------
------ - ------- - ---- --------------
------ - ---------- - ---- -----------

----- -------------- - -- --------- -------- ------ ------------------- -- -- -
  ------------ -- -
    ----- ----------------- - -------------- -- -
      ----------------------
    -- -------
    ----------------------
    ------ -- -- -
      ---------------------------------
    --
  -- ----
  ------ -
    -----
      ---------- -------------
      -------- - -
        ---------------------
      - - ----- - -
        ----------- -------------
      - - -
        ----
          ----------------------- -- -
            --- ------------------------------------
          ---
        -----
      --
    ------
  --
--

----- --------------- - ------- -- --
  --------- ---------------------------- -- ---
  -------- ----------------------------------
  ------ ------------------------------
---

----- ------------------ - -
  -------------------- -----------
--

------ ------- ------------------------ ------------------------------------
展开代码

在该组件中,我们使用了 React Hooks 中的 useEffect 方法,用于在组件传入时开始异步请求。我们使用了 setInterval 方法,每隔 10 秒钟就重新获取一次数据。我们还使用了 connect 方法,将 Redux 中的数据和 action 注入到组件中使用。

至此,我们已经完成了 react-redux-fetch-extra 的使用,现在我们可以启动应用,看到我们的 Github 用户最新创建的 5 个项目并且每隔 10 秒更新一次。

总结

本文介绍了 npm 包 react-redux-fetch-extra 的使用方式,这个 npm 包提供了一系列的工具,用于更方便地处理 Redux 中的异步请求。我们以一个 Github 用户的最新创建项目的示例说明了该如何配置 reducer、action 和 component,来实现一个完整的应用。我们可以使用 react-redux-fetch-extra 来简化数据获取的 boilerplate 代码,提高代码可读性和重用性。

来源:JavaScript中文网 ,转载请注明来源 https://www.javascriptcn.com/post/600671cc30d092702382281c

纠错
反馈

纠错反馈