介绍
redux-toolbox-fetch 是一个基于 Redux 和 Redux Toolkit 的 HTTP 请求库，它封装了 fetch 和 Redux Toolkit 的 createAsyncThunk，提供了一种简单、易用的方式来进行 HTTP 请求并处理响应。
安装
在项目根目录中执行以下命令来安装 redux-toolbox-fetch：
npm install redux-toolbox-fetch
使用
在 reducer 中使用
-- -------------------- ---- -------
------ - ----------- - ---- -------------------
------ - -------- - ---- ----------------------
----- --------- - -------------
----- -------
------------- -
---------- ------
----- -----
------ ----
--
--------- ---
-------------- ------- -- -
--------------------------------- ----- -- -
--------------- - -----
----------- - -----
---
----------------------------------- ------- ------- -- -
--------------- - ------
---------- - ---------------
---
---------------------------------- ------- ------- -- -
--------------- - ------
----------- - ---------------------
---
-
---
------ ------- ------------------在组件中使用
-- -------------------- ---- -------
------ - --------- - ---- --------
------ - ------------ ----------- - ---- --------------
------ - -------- - ---- ----------------------
------ - ----------- --------- - ---- --------------
-------- ------ -
----- ---- - ------------------------
----- -------- - --------------
------------ -- -
-------------------
----- --------
------- -----
----
-- ------------
------ -
--
--------------- -- ------------------
----------- -- --------------------
---------- -- ------------------------
---
--
-
------ ------- -----在上面的代码中，我们定义了一个名为 User 的 React 组件，使用了 useEffect 和 useSelector 将组件与 Redux Store 中的状态进行连接。
我们首先从 Redux Store 中取出了 selectUser 这个 selector，然后使用 useDispatch 获取了 dispatch 函数，它允许我们向 Redux Store 分发一个 action。
在 useEffect 中，我们使用了 fetchApi 函数来进行 HTTP 请求。这里我们指定了请求路径为 /user，请求方法为 GET。fetchApi 是一个可重用的 Redux Toolkit action creator，它将发送一个 API 请求并处理响应，最终将结果分发给 Redux Store。
在组件中，我们通过读取 Redux Store 中的状态来渲染 UI。这里我们使用了 isLoading、error 和 data 三个状态值，允许我们在不同的请求状态下显示不同的内容。
高级用法
自定义响应解析
每个 API 响应可以有不同的格式，这取决于服务端的实现。为了解决这个问题，我们可以传递一个解析响应的函数给 fetchApi。这个函数将在响应到达后执行，用于将响应体解析为我们需要的格式。
-- -------------------- ---- -------
------ - ----------- - ---- -------------------
------ - -------- - ---- ----------------------
----- --------- - -------------
----- -------
------------- -
---------- ------
----- -----
------ ----
--
--------- ---
-------------- ------- -- -
--------------------------------- ----- -- -
--------------- - -----
----------- - -----
---
----------------------------------- ------- ------- -- -
--------------- - ------
---------- - ---------------
---
---------------------------------- ------- ------- -- -
--------------- - ------
----------- - ---------------------
---
-
---
------ ----- - --------- - - ------------------
------ ----- ---------- - ----- -- -----------
------ ----- ----------------- - -------- -- -
----- - ----- -------- ---- - - ---------
-- ----- --- ---------- -
------ -----
- ---- -
----- --- ---------------
-
--
------ ------- ------------------在上面的代码中，我们定义了一个名为 parseUserResponse 的函数，它将负责将响应解析为我们想要的格式。在这个函数中，我们从响应中提取出了 data、message 和 code 三个属性，并根据 code 值做出了不同的处理。
最后，我们将 parseUserResponse 这个函数传递给 fetchApi，让它使用这个函数来解析响应。这样我们就可以使用自定义的方式来处理响应结果，提高了复用性和可维护性。
自定义请求处理
有些时候，我们需要在发起 HTTP 请求之前对请求进行一些处理，例如添加一些请求头、设置请求超时等。为了解决这个问题，我们可以传递一个处理请求的函数给 fetchApi。
-- -------------------- ---- -------
------ - ----------- - ---- -------------------
------ - -------- - ---- ----------------------
----- --------- - -------------
----- -------
------------- -
---------- ------
----- -----
------ ----
--
--------- ---
-------------- ------- -- -
--------------------------------- ----- -- -
--------------- - -----
----------- - -----
---
----------------------------------- ------- ------- -- -
--------------- - ------
---------- - ---------------
---
---------------------------------- ------- ------- -- -
--------------- - ------
----------- - ---------------------
---
-
---
------ ----- - --------- - - ------------------
------ ----- ---------- - ----- -- -----------
------ ----- ----------------- - ----- --------- -- -
-------------------------------- - ------- -------
------ --------
--
------ ------- ------------------在上面的代码中，我们定义了一个名为 handleUserRequest 的函数，它将在发起 HTTP 请求之前执行。在这个函数中，我们修改了请求头，将一个名为 Authorization 的请求头添加到了请求中。
最后，我们将 handleUserRequest 这个函数传递给 fetchApi，让它使用这个函数来处理请求。这样我们就可以使用自定义的方式来处理请求，提高了灵活性和可扩展性。
结论
redux-toolbox-fetch 是一个非常实用的 Redux 插件，通过它我们可以轻松地进行 HTTP 请求和处理响应。它提供了丰富的配置选项和可扩展性，适用于各种不同的项目需求。
如果你正在开发一个 React + Redux 应用，并且需要进行 HTTP 请求，那么 redux-toolbox-fetch 是一个值得你尝试的工具。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005671181e8991b448e3539