Redux 是一个广泛使用的 JavaScript 应用程序状态容器，用于管理应用程序中的数据流。Redux 提供了一种优雅的方式来管理应用程序中的状态，以便能够更好地处理复杂的 UI、数据流和其他功能。但是，Redux 本身不能处理异步操作，这意味着在处理异步请求时需要使用其他库。
在这篇文章中，我们将学习在 Redux 中使用 redux-thunk 处理异步请求的实现方法。同时，我们也将探讨 redux-thunk 背后的概念，以及它如何帮助我们在 Redux 中处理异步操作。
redux-thunk 简介
redux-thunk 是一个 Redux 中间件，它允许我们通过异步方式来 dispatch actions，从而使我们可以更轻松地处理异步操作。简单来说，redux-thunk 允许我们定义 action creators 为一个函数，而非一个对象，然后在这个函数中进行异步操作。
为了更好地理解 redux-thunk，我们来看一个例子。下面的代码段是一个经典的 Redux action：
----- --------- - -- -- -
------ -
----- -----------
-
-这个 action creator 返回一个简单的对象，其中包含 type 属性并且没有其他属性。但是，如果我们需要在这个 action creator 中执行异步操作，我们该怎么做呢？
这个时候，我们就可以使用 redux-thunk。我们可以将上面的代码重写为以下形式：
----- --------- - -- -- -
------ ---------- -- -
---------- ----- ---------- --
------------------
-------------- -- ----------------
---------- -- -
---------- ----- ------------- ---- --
--
-
-现在，我们定义的是一个函数，它接受 dispatch 作为参数，并返回另一个函数，dispatch 在这个函数中被引用。
在这个新的 fetchData 函数中，我们首先 dispatch 了一个 action，然后使用 fetch 来获取数据。在获取到数据后，我们再次 dispatch 另一个 action，其中包含我们需要的数据。
这样，我们就可以在 Redux 中处理异步请求了。
实现方法
要在 Redux 中使用 redux-thunk，我们需要完成以下步骤：
首先，安装 redux-thunk。
--- ------- ------ -----------
然后，在创建 store 时，将 redux-thunk 中间件添加到 middleware 数组中：
------ - ------------ --------------- - ---- -------
------ --------------- ---- -------------
------ ----------- ---- ------------
----- ----- - ------------
------------
----------------
---------------
-
-现在，我们可以在 action creator 中使用异步请求了。
----- --------- - -- -- -
------ ---------- -- -
---------- ----- ---------- --
------------------
-------------- -- ----------------
---------- -- -
---------- ----- ------------- ---- --
--
-
-在这个例子中，我们可以看到如何使用异步请求获取数据，并将数据放入 Redux store 中。
深入理解
现在我们已经了解了 redux-thunk 的基本用法，让我们深入了解一下它的背后原理。
正如我们所述，redux-thunk 是一个 Redux 中间件，它让你在 action creator 中定义函数。但是："函数" 并不是 JavaScript 中的一种 action 类型，所以它仅仅是为了方便使用。
当我们使用 redux-thunk 时，我们并不是在派发一个 action，而是在派发函数。这个函数接收 dispatch 的方法并在其中派发 action。这样做的好处在于，这个函数可以执行任何操作，包括异步操作，并且这个函数可以在完成操作后再次派发 action。
例如，在上面的例子中，我们使用 fetch 来获取数据。fetch 函数返回一个 Promise，它在获取到数据后执行 then 函数。在 then 函数中，我们再次派发另一个 action，将获取到的数据放入 Redux Store 中。由于 dispatch 方法始终是同步的，因此我们可以在函数中执行异步操作，并在完成之后再次派发 action。
总结
在 Redux 中使用 redux-thunk 可以简化异步操作的处理。它允许我们定义函数作为 action creator，使我们可以处理异步请求。在本文中，我们学习了如何在 Redux 中使用 redux-thunk，并深入了解了 redux-thunk 的工作原理。
现在，你可以在 Redux 中使用 redux-thunk 处理异步请求了。使用 redux-thunk，你可以更好地处理复杂的应用程序状态，并在完成异步操作后更新 Redux Store。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/64f56e72f6b2d6eab3e24fb1