简介
在前端开发中，经常需要获取远程服务器数据，例如使用 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