在前端开发中，我们经常需要跟后端进行数据交互，这个时候我们就需要发送网络请求来获取数据。而其中一种使用起来非常方便的方式就是使用 redux-thunk-fetch 这个 npm 包来进行数据请求管理。那么在接下来的文章中，我们就来详细地介绍一下 redux-thunk-fetch 的使用教程，帮助你更好地完成数据请求的管理。
什么是 redux-thunk-fetch？
redux-thunk-fetch 是一个基于 redux-thunk 开发的 npm 包，它可以帮助开发者更方便地进行网络请求管理。通过 redux-thunk-fetch，我们可以更容易地定义请求的参数、url、请求方法等信息，而且还能够方便地管理请求的状态、错误信息等。因此，它非常适合用于大型 Web 应用的网络请求管理。
安装和配置 redux-thunk-fetch
在开始使用 redux-thunk-fetch 之前，我们需要先安装这个 npm 包。使用 npm 安装的命令如下：
npm install --save redux-thunk-fetch
安装完成之后，我们就需要进行 redux-thunk-fetch 的配置了。在你的 redux store 中，你需要添加 redux-thunk-fetch 的中间件。可以像下面这样配置：
-- -------------------- ---- ------- ------ - ------------ --------------- - ---- -------- ------ -------------------- ---- -------------------- ------ -------- ---- ------------- ----- ----- - ------------ --------- ------------------------------------- -- ------ ------- ------
这样，我们就已经完成了 redux-thunk-fetch 的安装和配置。
使用 redux-thunk-fetch 进行网络请求
在 redux-thunk-fetch 中，我们需要定义一个 action creator，这个 action creator 就是发起网络请求的函数。在这个函数中，我们需要使用 redux-thunk-fetch 提供的 fetch 函数来进行真正的网络请求。以下是一个定义了一个发起 GET 请求的 action creator 的示例代码：
import { createAction } from 'redux-actions';
import { fetch } from 'redux-thunk-fetch';
export const fetchUser = createAction('FETCH_USER', (id) => ({
url: `https://jsonplaceholder.typicode.com/users/${id}`,
success: 'FETCH_USER_SUCCESS',
failure: 'FETCH_USER_FAILURE',
}));在上面的代码中，我们定义了一个 fetchUser 的 action creator 函数，它接受一个 id 参数，用于指定需要请求的用户 id。在函数中，我们使用了 redux-thunk-fetch 提供的 fetch 函数来发起网络请求，它接受三个参数：
- url：请求的地址；
- success：当请求成功时，redux 的 action type；
- failure：当请求失败时，redux 的 action type。
通过定义这个 action creator，我们就可以在我们的组件中通过 dispatch 方法来发起网络请求了，如下所示：
-- -------------------- ---- -------
------ ------ - --------- - ---- --------
------ - ------------ ----------- - ---- --------------
------ - --------- - ---- --------------------
------ ------- -------- ------ -- -- -
----- -------- - --------------
----- ---- - ------------------- -- ------------
------------ -- -
------------------------
-- ------
------ -
--
------ -- ----------------------
----- -- -
-----
--------------------
----------- ------------------
----------- ------------------
------
--
---
--
-在上面的代码中，我们使用了 useSelector 钩子来从 redux 中获取 user 信息，然后使用 useEffect 钩子在组件 mount 之后发起 fetchUser Action，获取 user 数据。当获取数据后，我们就可以在组件中展示用户的信息。
总结
在这篇文章中，我们介绍了如何使用 redux-thunk-fetch 来进行网络请求的管理。首先，我们安装和配置了 redux-thunk-fetch，然后定义了一个用于发起 GET 请求的 action creator，并演示了如何在组件中发起网络请求和展示请求结果。在实际开发中，我们可以使用类似的方法来定义其他类型的网络请求，并轻松地管理网络请求的状态和错误信息。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6006700de361a36e0bce8cdf