Redux 是一种用于 JavaScript 应用程序的可预测状态容器，它可以帮助我们管理应用程序的状态并使代码易于理解和维护。在 Redux 中，所有的状态都被保存在一个单一的存储库中，这个存储库被称为“store”。当我们需要改变状态时，我们会发送一个“action”到 store 中，store 会根据这个 action 来更新状态。然而，在实际应用中，我们经常需要进行异步操作（如从服务器获取数据），这时候就需要一些额外的工具来帮助我们处理这些异步操作。
在本文中，我们将介绍 Redux 中异步操作的几种方式，并提供详细的示例代码和学习指导。
方式一：使用 redux-thunk
redux-thunk 是一个 Redux 中间件，它允许我们在 action 中返回一个函数而不是一个普通的 action 对象。这个函数可以接受 store 的 dispatch 方法作为参数，并且可以在需要的时候分发一些额外的 action。这个方法可以用于处理异步操作，例如从服务器获取数据。
以下是一个使用 redux-thunk 处理异步操作的示例代码：
-- -------------------- ---- -------
------ - ------------ --------------- - ---- --------
------ ----- ---- --------------
----- ------------ - -
---------- ------
----- -----
------ ----
--
-------- ------------- - ------------- ------- -
------ ------------- -
---- ---------------------
------ -
---------
---------- ----
--
---- ---------------------
------ -
---------
---------- ------
----- --------------
--
---- ---------------------
------ -
---------
---------- ------
------ --------------
--
--------
------ ------
-
-
-------- ----------- -
------ -------- -- -
---------- ----- -------------------- ---
-------------------------------------
-------------- -- ----------------
---------- -- -
---------- ----- --------------------- -------- ---- ---
--
------------ -- -
---------- ----- --------------------- -------- ----- ---
---
--
-
----- ----- - -------------------- ------------------------
----------------------------在上面的示例代码中，我们首先定义了一个 reducer 函数来处理不同的 action。然后，我们定义了一个 fetchData 函数，它返回一个函数作为 action，这个函数接受 store 的 dispatch 方法作为参数，并在需要的时候分发一些额外的 action。在这个例子中，我们使用了 fetch 函数来从服务器获取数据，并在数据到达时分发 FETCH_DATA_SUCCESS action，如果出现错误则分发 FETCH_DATA_FAILURE action。
最后，我们使用 applyMiddleware 方法将 redux-thunk 中间件添加到 store 中，然后通过 store.dispatch 方法来调用 fetchData 函数。
方式二：使用 redux-promise
redux-promise 是 Redux 中的另一个中间件，它允许我们在 action 中返回一个 promise 对象。这个 promise 对象可以在需要的时候分发一些额外的 action。这个方法也可以用于处理异步操作，例如从服务器获取数据。
以下是一个使用 redux-promise 处理异步操作的示例代码：
-- -------------------- ---- -------
------ - ------------ --------------- - ---- --------
------ ------- ---- ----------------
----- ------------ - -
---------- ------
----- -----
------ ----
--
-------- ------------- - ------------- ------- -
------ ------------- -
---- ---------------------
------ -
---------
---------- ----
--
---- ---------------------
------ -
---------
---------- ------
----- --------------
--
---- ---------------------
------ -
---------
---------- ------
------ --------------
--
--------
------ ------
-
-
-------- ----------- -
------ -
----- -------------
-------- --------------------------------------------------- --
---------------
-
--
-
----- ----- - -------------------- --------------------------
----------------------------在上面的示例代码中，我们首先定义了一个 reducer 函数来处理不同的 action。然后，我们定义了一个 fetchData 函数，它返回一个 action 对象，这个对象的 payload 属性是一个 promise 对象。在这个例子中，我们使用了 fetch 函数来从服务器获取数据，并将返回的 promise 对象作为 FETCH_DATA action 的 payload。
最后，我们使用 applyMiddleware 方法将 redux-promise 中间件添加到 store 中，然后通过 store.dispatch 方法来调用 fetchData 函数。
方式三：使用 redux-saga
redux-saga 是一个 Redux 中间件，它允许我们使用 generator 函数来处理异步操作。通过使用 redux-saga，我们可以将异步操作的逻辑从组件中分离出来，使代码更加清晰和易于维护。
以下是一个使用 redux-saga 处理异步操作的示例代码：
-- -------------------- ---- -------
------ - ------------ --------------- - ---- --------
------ -------------------- ---- -------------
------ - ----- ---- --------- - ---- ---------------------
----- ------------ - -
---------- ------
----- -----
------ ----
--
-------- ------------- - ------------- ------- -
------ ------------- -
---- ---------------------
------ -
---------
---------- ----
--
---- ---------------------
------ -
---------
---------- ------
----- --------------
--
---- ---------------------
------ -
---------
---------- ------
------ --------------
--
--------
------ ------
-
-
--------- ----------------- -
--- -
----- ----- ----- -------------------- ---
----- ---- - ----- ----------- --------------------------------
----- ----- ----- --------------------- -------- ---- ---
- ----- ------- -
----- ----- ----- --------------------- -------- ----- ---
-
-
--------- ---------------- -
----- ----------------------- -----------
-
----- -------------- - -----------------------
----- ----- - -------------------- ---------------------------------
-----------------------------------
---------------- ----- ------------ ---在上面的示例代码中，我们首先定义了一个 reducer 函数来处理不同的 action。然后，我们定义了一个 fetchData generator 函数，它使用 put 和 call 函数来分发额外的 action 和执行异步操作。在这个例子中，我们使用了 fetch 函数来从服务器获取数据，并在数据到达时分发 FETCH_DATA_SUCCESS action，如果出现错误则分发 FETCH_DATA_FAILURE action。
最后，我们使用 createSagaMiddleware 方法创建一个 redux-saga 中间件，并将其添加到 store 中。然后，我们使用 sagaMiddleware.run 方法来运行 watchFetchData generator 函数，这个函数会监听 FETCH_DATA action 并在收到这个 action 时调用 fetchData generator 函数。
总结
在本文中，我们介绍了 Redux 中异步操作的三种方式：使用 redux-thunk、使用 redux-promise 和使用 redux-saga。这些方法都可以用于处理异步操作，例如从服务器获取数据。每种方法都有其优缺点，我们需要根据具体情况选择合适的方法。
对于初学者来说，建议先尝试使用 redux-thunk，因为它相对简单，易于理解和使用。如果需要更高级的功能，可以尝试使用 redux-promise 或 redux-saga。
希望本文能够帮助读者更好地理解 Redux 中的异步操作，并提供一些指导和启示。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/661747e6d10417a2227183ab