在前端开发中，异步请求是很常见的操作。但是，当我们在使用 Redux 进行状态管理时，如果在异步请求未完成时子组件已经开始渲染，就会出现一些问题。本文将介绍如何在 Redux 中进行错误处理，以解决这个问题。
问题描述
假设我们有一个页面，需要通过异步请求获取数据并展示。我们使用 Redux 进行状态管理，将请求结果存储在 Redux 的 store 中。在页面渲染时，我们通过 connect 函数将 store 中的数据传递给子组件进行展示。
但是，当异步请求未完成时，子组件已经开始渲染，此时 store 中的数据还没有被更新。这就会导致子组件展示的内容不正确，甚至出现错误。
解决方案
为了解决这个问题，我们需要在 Redux 中进行错误处理。具体来说，我们需要在异步请求开始时，将一个 loading 状态添加到 store 中。在请求完成时，根据请求结果更新 store 中的数据。这样，在子组件渲染时，我们可以根据 loading 状态判断是否展示数据。
添加 loading 状态
首先，我们需要在 Redux 的 store 中添加一个 loading 状态。在请求开始时，将 loading 状态设置为 true。在请求完成时，将 loading 状态设置为 false。
-- -------------------- ---- -------
-- -- ------
----- ------------------ - ---------------------
----- ------------------ - ---------------------
----- ------------------ - ---------------------
-- -- ------ -------
----- ---------------- - -- -- --
----- ------------------
---
----- ---------------- - ------ -- --
----- -------------------
-------- ----
---
----- ---------------- - ------- -- --
----- -------------------
-------- -----
---
-- -- -------
----- ------------ - -
----- -----
-------- ------
------ ----
--
----- ------- - ------ - ------------- ------- -- -
------ ------------- -
---- -------------------
------ -
---------
-------- ----
--
---- -------------------
------ -
---------
----- ---------------
-------- ------
------ ----
--
---- -------------------
------ -
---------
-------- ------
------ --------------
--
--------
------ ------
-
--在组件中获取 loading 状态
在子组件中，我们可以通过 mapStateToProps 函数获取 store 中的 loading 状态。根据 loading 状态，我们可以决定是否展示数据。
-- -------------------- ---- -------
----- --------------- - ------- -- --
----- -----------
-------- -------------
---
----- ----------- - -- ----- ------- -- -- -
-- --------- -
-- -----
------ ----------------------
-
-- ------- -
-- ----
------ ----------- -- ---- ------------
-
-- ---------
------ ------------------
--
------ ------- --------------------------------------处理请求错误
在异步请求过程中，可能会出现错误。为了处理错误，我们需要在 action creator 中添加错误处理逻辑。在请求失败时，将错误信息添加到 store 中的 error 状态中。
-- -------------------- ---- -------
----- --------- - -- -- -
------ ---------- -- -
-----------------------------
------------------
-------------- -- ----------------
---------- -- -
---------------------------------
--
------------ -- -
------------------------------------------
---
--
--在组件中，我们可以根据 error 状态展示错误信息。
-- -------------------- ---- -------
----- --------------- - ------- -- --
----- -----------
-------- --------------
------ -----------
---
----- ----------- - -- ----- -------- ----- -- -- -
-- --------- -
-- -----
------ ----------------------
-
-- ------- -
-- -----------
------ -------------------
-
-- ------- -
-- ----
------ ----------- -- ---- ------------
-
-- ---------
------ ------------------
--
------ ------- --------------------------------------总结
在 Redux 中进行错误处理，可以解决异步请求未完成时子组件渲染的问题。我们可以在 Redux 的 store 中添加 loading 状态，在组件中根据 loading 状态展示数据。同时，我们还可以处理请求错误，展示错误信息。这样，我们就可以更好地处理异步请求，提高应用程序的稳定性和用户体验。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/65d6e2801886fbafa447c9b9