在前端开发中，我们经常需要和后端进行数据交互。然而，由于网络等各种原因，请求往往会失败。为了提高用户体验，我们需要在请求失败时进行重试。本文将介绍在 Redux 中如何处理失败重试。
为什么需要失败重试
在现实世界中，网络并不总是可靠的。用户在使用我们的应用时，可能会遇到网络连接不稳定或者服务器故障等问题，导致请求失败。如果我们不进行重试，那么用户可能会遇到无法获取数据的情况，这会极大地影响用户体验。
Redux 中的失败重试
在 Redux 中，我们可以通过中间件来处理失败重试。中间件是 Redux 的一个核心概念，它可以拦截 action，并对其进行处理。我们可以通过编写一个中间件，来实现在请求失败时进行重试。
下面是一个简单的中间件示例：
----- --------------- - -- -------- -- -- ---- -- ------ -- -
-- ---------------------------------- -
------------- -- -
---------- ---------- ----- ------------------------------- ----------- ---
-- ------
-
------ -------------
--这个中间件会监听所有以 _FAILURE 结尾的 action，并在 1 秒后重新发送一个以 _REQUEST 结尾的 action。这样，我们就可以在请求失败时进行重试。
实际应用
在实际应用中，我们可以将中间件和 Redux 的异步 action 结合起来使用。下面是一个示例代码：
------ - ----------------- ----------- - ---- -------------------
----- --------- - ----------------------------------- ----- -------- - --------------- -- -- -
--- -
----- -------- - ----- ------------------------------
----- ---- - ----- ----------------
------ -----
- ----- ------- -
------ -------------------------------
-
---
----- ---------- - -------------
----- --------
------------- -
----- -----
------- -------
------ -----
--
--------- ---
-------------- ------- -- -
-------
--------------------------- ----- -- -
------------ - ----------
--
----------------------------- ------- ------- -- -
------------ - ------------
---------- - ---------------
--
---------------------------- ------- ------- -- -
------------ - ---------
----------- - ---------------
---
--
---
------ - --------- --
------ ------- -------------------在这个示例代码中，我们使用了 Redux Toolkit 提供的 createAsyncThunk 函数来创建异步 action。这个函数会自动创建三个 action，分别是 pending、fulfilled 和 rejected。我们可以在 extraReducers 中对这些 action 进行处理。
当请求失败时，fetchUser.rejected action 会被触发。我们可以在这个 action 中使用中间件来进行重试。修改中间件示例代码中的 if 判断条件，使其只监听 fetchUser.rejected action：
----- --------------- - -- -------- -- -- ---- -- ------ -- -
-- ------------ --- --------------------------- -
------------- -- -
---------- ---------- ----- ------------------------- ---
-- ------
-
------ -------------
--这样，当请求失败时，中间件会在 1 秒后重新发送一个 fetchUser.pending action，从而进行重试。
总结
在本文中，我们介绍了在 Redux 中如何处理失败重试。通过编写一个中间件，我们可以在请求失败时进行重试，从而提高用户体验。在实际应用中，我们可以将中间件和 Redux Toolkit 提供的 createAsyncThunk 函数结合起来使用，来实现更加简洁和优雅的代码。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/65525d56d2f5e1655dc23c04