简介
在前端开发中,经常需要获取远程服务器数据,例如使用 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:
npm install --save 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 文件中添加以下代码:
export const { fetchAsync } = getLatestProjects.actions;
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