在 React 项目中，状态管理通常使用 Redux 进行管理。redux-async-fetcher 是另一个强大的 npm 包，用于处理复杂的异步操作和状态更新。本文将带领您了解如何使用 redux-async-fetcher 包，并提供示例代码。
安装
您可以使用 npm 或 yarn 安装 redux-async-fetcher 包。打开您的终端并输入以下命令：
使用 npm：
npm install redux-async-fetcher
使用 yarn：
yarn add redux-async-fetcher
使用方法
redux-async-fetcher 包旨在处理异步操作以及状态更新。它并不是一个完整的状态管理工具，而是与 Redux 结合使用。让我们看看如何使用 redux-async-fetcher 包。
步骤 1：在 reducers 中配置 FetcherReducer
打开 Redux 中的 reducers 文件夹，并为每个模块创建一个 reducer。如果您使用的是 Redux Toolkit，您可以使用 createSlice 函数。
创建一个名为 FetcherReducer 的 reducer，并通过 combineReducers 函数将其合并到根 reducer 中。这将允许我们通过 fetcherData 来访问应用程序中的所有数据。
-- -------------------- ---- ------- ------ - --------------- - ---- ------- ------ - -------------- - ---- --------------------- ----- ----------- - ----------------- ------------ --------------- ------------- -- ------ ------- -----------
步骤 2：创建一个新的 fetchConfig 文件
接下来，我们需要为所有 fetch 请求创建一个统一的配置文件。在您的项目中创建一个名为 fetchConfig.js 的文件，并将以下代码添加到文件中：
-- -------------------- ---- -------
------ ----- ----------- - -
------- ------
-------- -
------- -------------------
--------------- -------------------
------------------------------ ---
--
------------ -------------
-fetchConfig 对象包含了所有 fetch 请求共有的配置，如请求方法，请求头以及凭证。每个请求都会根据需要改变这些配置。
为了改变 fetch 请求，我们需要在 fetchConfig 对象上定义可变字段，如请求 URL 和请求参数。我们将在执行每个 fetch 请求时做出这些更改。
步骤 3：创建 action 和 asyncAction
接下来，我们需要创建 action 和 asyncAction。
action 是在 reducer 中处理状态更新的简单对象。在 actions.js 文件中，创建一个名为 fetchSomething 的 action，并将 fetch 请求响应的数据作为 payload 传递给 reducer。
import { createAction } from 'redux-actions'
export const fetchSomething = createAction('FETCH_SOMETHING')asyncAction 是一个带有 5 个参数的函数。第一个参数是一个字符串，表示 action 的类型。第二个参数是一个函数，该函数接受 dispatch 和 getState 函数作为参数，并返回一个 promise。第三个参数是一个可选项，用于配置请求。第四个参数是请求成功的 action，第五个参数是请求失败的 action。asyncAction 通过将接收到的 promise 与 fetcherData 部分透明化地结合来完成请求。
在 actions.js 文件中，创建一个名为 fetchSomethingAsync 的 asyncAction。
-- -------------------- ---- -------
------ - ----------------- - ---- ---------------------
------ - -------------- - ---- -----------
------ - ----------- - ---- ---------------
------ ----- ------------------- - ------------------
------------------------
----- ---------- --------- ---- -- -
----- - ---- ------ - - ---
----- --- - ----- ---------- - --------------- ------ --
------ ----------
--
- ---- ---------------------- ------- -- --
---------------
----- -- ----------------
-有几个参数值得注意：
第一个参数指定了 action 的类型。
第二个参数是使用 fetchConfig 和 fetch 页面的方法创建的异步函数。注意传递的参数就像在标准 fetch 中一样，但作为整个对象被传递。
第三个参数是可选的。它们是传递给 fetch() 做出一些改变的项目。比如您想使用 POST 请求而不是 GET 请求，您可以在这里更改请求方法，以及添加其他除 Headers 和 Body（通过 fetchConfig 传递）之外的其他信息。
第四个和第五个参数是请求成功和请求失败后分别执行的 action。
步骤 4：在组件中使用
在组件中使用 asyncAction 的最简单方法是在 componentDidMount 或 useEffect 中使用它。在完成请求后，此函数将返回一个 promise 对象，您可以在 .then () 和 .catch() 函数中使用它。
-- -------------------- ---- -------
------ ------ - --------- - ---- -------
------ - ------------ ----------- - ---- -------------
------ - ------------------- - ---- -----------
------ ----- --------- - ------- -- -
----- -------- - -------------
----- ----------- - ------------------- -- ------------------
------------ -- -
------------------------------ ---- ------------------------------- ---
-- ---
-- ----------------------------------------- -
------ -----------------------
-
------ -------------------------------------------------
-注意：fetch 请求是在组件中注册但由异步函数执行的。通过 select-fetcher-data-async 接受状态并检查 fetch 请求的状态（loading，error，data）来绑定组件。
示例代码
下面是使用 redux-async-fetcher 包的完整示例代码：
-- -------------------- ---- -------
------ - --------------- - ---- -------
------ - ------------------ -------------- - ---- ---------------------
------ - ------------ - ---- ---------------
------ ----- -------------- - -------------------------------
----- ----------- - -----------------
------------ ---------------
--
------ ----- ----------- - -
------- ------
-------- -
------- -------------------
--------------- -------------------
------------------------------ ---
--
------------ -------------
-
------ ----- ------------------- - ------------------
------------------------
----- ---------- --------- ---- -- -
----- - ---- ------ - - ---
----- --- - ----- ---------- - --------------- ------ --
------ ----------
--
- ---- ---------------------- ------- -- --
---------------
----- -- ----------------
-
------ ----- --------- - ------- -- -
----- -------- - -------------
----- ----------- - ------------------- -- ------------------
------------ -- -
------------------------------ ---- ------------------------------- ---
-- ---
-- ----------------------------------------- -
------ -----------------------
-
------ -------------------------------------------------
-结论
redux-async-fetcher 是一个功能强大的 npm 包，可轻松处理复杂的异步操作和状态更新。但是，它只能与已安装的 Redux 库一起使用。在本篇文章中，我们提供了使用 redux-async-fetcher 包的详细介绍，并为您提供了示例代码。希望这篇文章对您有所帮助！
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6006734f890c4f7277583820