Redux 是一个流行的 JavaScript 应用程序状态管理库，它可以帮助我们更好地管理应用程序的状态，并使状态更加可预测。然而，在处理异步操作时，Redux 的工作方式可能会让人感到困惑。在本文中，我们将深入探讨 Redux 中如何正确处理异步操作。
异步操作的问题
在 Redux 中，我们可以通过使用 action 和 reducer 来管理应用程序的状态。当我们需要进行异步操作时，我们可能会遇到一些问题。例如，我们可能需要在获取数据之前显示一个加载指示器，并在获取数据后更新状态。这意味着我们需要在异步操作完成之前更新状态，但我们无法在 reducer 中执行异步操作。此外，我们还需要处理异步操作失败的情况。这些问题可能会让我们感到困惑，但 Redux 提供了一些解决方案。
解决方案
使用中间件
Redux 中间件是一个函数，它可以在 action 被发起之后，但在它被 reducer 处理之前执行一些额外的逻辑。这使得我们可以在中间件中执行异步操作，并在异步操作完成后更新状态。
Redux 社区中有许多中间件可供选择，其中最流行的是 Redux Thunk 和 Redux Saga。在本文中，我们将重点介绍 Redux Thunk。
Redux Thunk
Redux Thunk 是一个 Redux 中间件，它允许我们在 action 中返回函数而不是对象。这使得我们可以在 action 中执行异步操作，并在异步操作完成后分发另一个 action 来更新状态。
让我们看一个例子：
-- -------------------- ---- -------
------ - ------------ --------------- - ---- --------
------ ----- ---- --------------
------ ----- ---- --------
-- -- ------ --
----- ------------------ - ---------------------
----- ------------------ - ---------------------
----- ------------------ - ---------------------
-- -- ------ ----
----- ---------------- - -- -- -
------ -
----- ------------------
-
-
----- ---------------- - ------ -- -
------ -
----- -------------------
-------- ----
-
-
----- ---------------- - ------- -- -
------ -
----- -------------------
-------- -----
-
-
-- ------
----- --------- - -- -- -
------ ---------- -- -
-----------------------------
-----------------------------------------
-------------- -- -
----- ---- - --------------
---------------------------------
--
------------ -- -
----- ------------ - --------------
-----------------------------------------
--
-
-
-- -- -------
----- ------------ - -
-------- ------
----- ---
------ --
-
----- ------- - ------ - ------------- ------- -- -
------ ------------- -
---- -------------------
------ -
---------
-------- ----
-
---- -------------------
------ -
---------
-------- ------
----- ---------------
------ --
-
---- -------------------
------ -
---------
-------- ------
----- ---
------ --------------
-
-------- ------ -----
-
-
-- -- -----
----- ----- - -------------------- ------------------------
-- ------
----------------------------在上面的例子中，我们首先定义了三个 action 类型和三个 action 创建函数。然后，我们定义了一个名为 fetchData 的异步操作，它返回一个函数。在该函数中，我们首先分发一个 FETCH_DATA_REQUEST action，以显示加载指示器。然后，我们使用 axios 发起一个 GET 请求来获取数据。如果请求成功，我们分发一个 FETCH_DATA_SUCCESS action，将数据作为 payload 传递给 reducer。如果请求失败，我们分发一个 FETCH_DATA_FAILURE action，将错误消息作为 payload 传递给 reducer。
接下来，我们定义了一个 reducer，它根据不同的 action 类型更新状态。最后，我们使用 createStore 函数创建了一个 store，并将 thunk 中间件应用于该 store。最后，我们分发了一个 fetchData 异步操作，它将在异步操作完成后更新状态。
处理异步操作失败
在上面的例子中，我们处理了异步操作成功的情况。但是，我们还需要处理异步操作失败的情况。在 Redux Thunk 中，我们可以使用 try/catch 语句来处理异步操作失败的情况。例如：
-- -------------------- ---- -------
----- --------- - -- -- -
------ ----- ---------- -- -
-----------------------------
--- -
----- -------- - ----- ------------------------------------------
----- ---- - --------------
---------------------------------
- ----- ------- -
----- ------------ - --------------
-----------------------------------------
-
-
-在上面的例子中，我们使用 try/catch 语句来处理异步操作失败的情况。如果请求成功，我们将数据作为 payload 传递给 reducer。如果请求失败，我们将错误消息作为 payload 传递给 reducer。
结论
在本文中，我们深入探讨了 Redux 中如何正确处理异步操作。我们介绍了 Redux Thunk 中间件，并提供了一个使用 Redux Thunk 处理异步操作的示例。我们还介绍了如何处理异步操作失败的情况。希望本文能够帮助你更好地理解 Redux 中如何处理异步操作，并为你在实际项目中处理异步操作提供指导。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67775ac06d66e0f9aa34d534