Redux 是一种用于 JavaScript 应用程序的可预测状态容器。它可以帮助我们管理应用程序中的状态，并且可以轻松地处理异步操作。在本文中，我们将探讨 Redux 异步操作的几个基本概念。
1. Action
在 Redux 中，Action 是一个包含有关应用程序中发生事件的信息的简单对象。Action 包含一个 type 属性，它描述了事件的类型，以及其他任意属性，这些属性被视为事件的有效负载。例如：
{
type: 'FETCH_DATA',
payload: { /* 数据 */ }
}Action 是通过 store.dispatch() 方法发送的。当我们调用该方法并传入一个 Action 对象时，Redux 会将该对象发送给 Reducer。
2. Reducer
Reducer 是一个纯函数，它接收先前的状态和一个 Action 对象，并返回一个新的应用程序状态。Reducer 的作用是根据 Action 类型更新状态。例如：
-- -------------------- ---- -------
-------- -------------------- - -- ------- -
------ ------------- -
---- ------------
------ ----- - --
---- ------------
------ ----- - --
--------
------ ------
-
-在这个例子中，Reducer 接收一个计数器的当前状态以及一个 Action 对象。如果 Action 的类型是 INCREMENT，则返回一个新的状态值，该值比当前状态值大 1。如果 Action 的类型是 DECREMENT，则返回一个新的状态值，该值比当前状态值小 1。否则，返回当前状态值。
3. Store
Store 是 Redux 的核心。它是一个包含应用程序状态的对象，以及一些用于更新状态的方法。Store 也是一个发布订阅模式的实现，可以通过 store.subscribe() 方法订阅状态的变化。例如：
-- -------------------- ---- ------- ------ - ----------- - ---- -------- ------ -------------- ---- ------------- ----- ----- - ---------------------------- ------------------ -- - ------------------------------ --- ---------------- ----- ----------- --- ---------------- ----- ----------- --- ---------------- ----- ----------- ---
在这个例子中，我们创建了一个 Store，该 Store 使用 counterReducer 作为其 Reducer。我们订阅了 Store 的变化，并向 Store 发送了三个 Action 对象，分别是 INCREMENT、INCREMENT 和 DECREMENT。每次更新 Store 后，我们都会在控制台中打印出新的状态。
4. Middleware
Middleware 是一个函数，它可以拦截、处理和转发 Action。Middleware 可以用于处理异步操作、日志记录、错误处理等。例如：
-- -------------------- ---- ------- ----- ---------------- - ----- -- ---- -- ------ -- - -------------------------- -------- ----- ------ - ------------- ----------------- ------- ------------------ ------ ------- -- ----- ----- - ------------ --------------- --------------------------------- --
在这个例子中，我们创建了一个 Middleware，该 Middleware 会在每次发送 Action 前后打印出日志。我们将 Middleware 应用于 Store，以便在每次 Action 发送时都会触发 Middleware。
5. Thunk
Thunk 是一个函数，它返回另一个函数，该函数可以处理异步操作。Thunk 可以让我们在 Action 中处理异步操作，例如向服务器发起请求并在响应返回后更新状态。例如：
-- -------------------- ---- -------
----- --------- - -- -- -------- -- -
---------- ----- ------------------ ---
------------------
-------------- -- ----------------
---------- -- ---------- ----- --------------------- -------- ---- ---
------------ -- ---------- ----- ------------------- -------- ----- ----
--
----------------------------在这个例子中，我们创建了一个 Thunk，该 Thunk 会向服务器发起请求并在响应返回后更新状态。我们将 Thunk 作为 Action 发送给 Store，Store 会将其发送给 Middleware 处理。
结论
在本文中，我们介绍了 Redux 异步操作的几个基本概念，包括 Action、Reducer、Store、Middleware 和 Thunk。这些概念是理解和使用 Redux 的关键。如果您正在学习 Redux，希望这篇文章对您有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/675946c836908a98ca6c6190