在前端开发中，我们经常需要进行数据请求，一些常见的做法包括使用 Ajax 技术进行数据请求、使用 fetch API 进行数据请求以及使用类似于 axios、superagent 等库进行数据请求。在 Redux 状态管理框架中，我们可能还需要在 Redux 中进行请求状态的管理，使用 middleware 实现。
但是，在对于大量数据请求的场景下，这些做法往往会出现对数据请求状态的混乱，导致前端开发工作的效率下降和代码的复杂性增加。因此本文将介绍一个 npm 包 redux-fetchers，来解决 Redux 应用中数据请求状态的管理问题。
redux-fetchers 简介
redux-fetchers 是一个用于 Redux 数据请求状态管理的 npm 包，它用于将数据请求封装成 Redux 中的 action，并通过类似于 Redux 与 Redux Thunk 的方式实现数据请求状态的管理。redux-fetchers 可以用于处理简单的 HTTP 请求或复杂的请求调度，还可以与 React 组件的生命周期绑定请求。
redux-fetchers 的安装和使用
redux-fetchers 的安装很简单，只需要在项目中使用 npm 或 yarn 进行安装即可：
npm install redux-fetchers --save
或者
yarn add redux-fetchers
接下来，我们将展示如何在 ReactRedux 应用中使用 redux-fetchers 进行数据请求状态管理。
Step 1: 定义 fetchers 文件
定义 fetchers 文件来管理你的数据请求。可以包含一个或多个 fetchers。例如：
-- -------------------- ---- ------- -- -------------- ------ ----- ------------ - --------------- ------ ----- --------- - -- -- -- ----- ------------- ---- ------------------- ------- ------ -------------------------- ------ -------- -- -- ----- ---------------- ----- ---- --- ---
在这个示例中，fetchUser 函数将接收 id 参数并使用它来获取指定用户的数据。这个函数返回了一个携带请求信息的 action 对象，类型为 USER_FETCHER，并将其推送到 Redux Store。
Step 2: 定义 reducer
定义一个 reducer 函数处理接受到的 action 类型。以下 Reducer 添加一个 users 字段来存储当前请求返回的所有用户。
-- -------------------- ---- -------
----- ------- - ------ - --- ------- -- -
------ ------------- -
---- ----------------
----- ------ - ---------------
------ -
---------
------ -
---------------
--------- ------------
--
--
--------
------ ------
-
--Step 3: 在 React 组件中调用 fetchers
在 React 组件中使用 redux-fetchers 很简单，你可以使用 fetchData HOC 高阶组件或 useFetchers 直接调用 fetchers。
示例：
-- -------------------- ---- -------
------ ----- ---- --------
------ - ------- - ---- --------------
------ - --------- - ---- -----------------
------ - --------- - ---- ----------------
----- --------------- - ------- ------ -- --
----- ----------------------
---
----- ------------------ - -
----------
--
----- ------- - ------------------------ --------------------
----- ------------- - -- ----- --------- -- -- -
-----
----
---------------- ---------------
-----
------
--
------ ------- ---------------------------------------------Step 4: 处理错与提示信息
redux-fetchers 插件还可以使用 createErrorAction 和 createLoadingAction 来处理请求失败时向 Redux 发出的警告和错误提示。
总结
redux-fetchers 通过封装 Redux 中的 action 和使用类似于 Middlewares 的机制，让数据请求状态的管理更加直观、方便。它还可以通过 React 组件生命周期的绑定来避免重复请求数据、减少滥用 Redux Store 等问题。redux-fetchers 有着非常强的指导意义，可以大大提升 Web 应用程序的性能和开发效率，希望你能够在实际开发中加以应用。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005641f81e8991b448e14e3