介绍
Redux 是一个广泛使用的 JavaScript 库，它可以帮助我们管理应用程序的状态。但是，Redux 只能处理同步的 Action，对于异步的 Action，就需要使用一些中间件来处理。
Redux-Thunk 是一个常用的中间件之一，它可以让我们 dispatch 一个函数来处理异步的 Action。本文将向您介绍如何使用 Redux-Thunk 处理异步 Action。
安装 Redux-Thunk
首先，需要在您的项目中安装 Redux-Thunk。
--- ------- ------ -----------
配置 Redux-Thunk
在 Redux 应用程序中使用 Redux-Thunk 非常简单。您只需要在 store 上应用 Redux-Thunk 中间件即可。
------ - ------------ --------------- - ---- -------- ------ ----- ---- -------------- ----- ----- - ------------ -------- ---------------------- --
现在，您可以 dispatch 一个函数来处理异步的 Action。
处理异步 Action
为了使用 Redux-Thunk 处理异步的 Action，我们需要 dispatch 一个函数，而不是一个对象。
----- --------- - -- -- -
------ ---------- -- -
---------- ----- -------------------- ---
-------------------------------------
-------------- -- ----------------
---------- -- -
---------- ----- --------------------- -------- ---- ---
--
------------ -- -
---------- ----- --------------------- ------ ------------- ---
--
--
--这个函数返回了一个函数，它接受 dispatch 作为第一个参数。在这个函数中，我们可以执行我们的异步操作，并在成功或失败时 dispatch 对应的 Action。
现在，我们可以在组件中 dispatch 这个函数。
----------------------
这就是如何使用 Redux-Thunk 处理异步 Action 的基本原理。
示例代码
下面是一个完整的示例代码，它展示了如何使用 Redux-Thunk 处理异步 Action。
------ - ------------ --------------- - ---- --------
------ ----- ---- --------------
-- ------ -----
----- ------------------ - ---------------------
----- ------------------ - ---------------------
----- ------------------ - ---------------------
-- ------ --------
----- ---------------- - -- -- -- ----- ------------------ ---
----- ---------------- - ------ -- -- ----- ------------------- -------- ---- ---
----- ---------------- - ------- -- -- ----- ------------------- ------ ------------- ---
-- -------
----- ------------ - -
-------- ------
----- ---
------ ----
--
----- ------- - ------ - ------------- ------- -- -
------ ------------- -
---- -------------------
------ - --------- -------- ---- --
---- -------------------
------ - --------- -------- ------ ----- -------------- --
---- -------------------
------ - --------- -------- ------ ------ ------------ --
--------
------ ------
-
--
-- -----
----- --------- - -- -- -
------ ---------- -- -
-----------------------------
-------------------------------------
-------------- -- ----------------
---------- -- -
---------------------------------
--
------------ -- -
----------------------------------
--
--
--
-- -----
----- ----- - ------------
--------
----------------------
--
-- --------
----------------------------这个示例代码定义了三个不同的 Action Types，它们分别表示请求数据、请求数据成功和请求数据失败。为了处理异步操作，我们定义了一个 Thunk，它会 dispatch 各种不同的 Action，以便更新我们的UI。然后，我们在 store 上应用了 Redux-Thunk 中间件，并使用 dispatch 函数来调用我们的 Thunk。
结论
使用 Redux-Thunk 处理异步 Action 对于 Redux 初学者来说可能非常棘手。但是，一旦您掌握了这个中间件的基本原理，使用它来管理异步操作的状态就非常简单了。毕竟，重要的是理解思想，而不仅仅是复制并粘贴代码。祝您好运！
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/672c310eddd3a70eb6d5791b