Redux 是一个流行的 JavaScript 应用程序状态管理库，通常用于处理应用程序中的大量数据状态，同时轻松实现响应式 UI。然而，有时我们需要处理异步数据流，例如从服务器获取数据，这可能比起同步操作更加复杂。本文将介绍 Redux 中处理异步操作的几个解决方案，并提供示例代码。
Redux 纯手动方式
Redux 中处理异步操作的一种方法是通过 Redux 纯手动方式。这种方式相对于其他解决方案更加基础，但也需要更多的代码。在这种方式中，我们需要手动触发异步操作并在数据返回时修改 Redux 状态。
-- -------------------- ---- -------
----- ----- - ---------------------
-------- ----------- -
---------------- ----- ------------ --
------------------
-------------- -- ----------------
---------- -- -
---------------- ----- --------------------- -------- ---- --
--
------------ -- -
---------------- ----- --------------------- -------- ----- --
--
-在此示例代码中，我们首先将 FETCH_DATA action 分发到 Redux store 中。接着，我们通过 fetch API 发送请求，并当数据返回时在 then 中触发 FETCH_DATA_SUCCESS action，并将数据作为 payload 传递给 action。如果请求出现错误，我们会通过 catch 触发 FETCH_DATA_FAILURE action 并将错误信息传递给 action。
虽然通过手动分发 Redux actions，我们可以处理异步操作，但这要求我们在每个请求处都添加相同的代码。更好的方法是将这个过程封装成一个可复用的函数。
Redux Thunk
Redux Thunk 是一种常用的处理异步操作的 Redux 解决方案。它是一个 Redux middleware，可用于处理返回函数的 actions。
我们将通过 Redux Thunk 轻松地处理异步操作和将代码抽象到 action creators 中。这种解决方案使我们不再需要执行繁琐的手动操作。
-- -------------------- ---- -------
----- ----- - -------------------- ------------------------
-------- ----------- -
------ ---------- -- -
---------- ----- ------------ --
------------------
-------------- -- ----------------
---------- -- -
---------- ----- --------------------- -------- ---- --
--
------------ -- -
---------- ----- --------------------- -------- ----- --
--
-
-在此示例代码中，我们返回一个函数而不是 action。这个函数接受 Redux store 的 dispatch 功能并触发 action。
Redux Thunk 有助于消除手动分发 action 的冗余代码，同时也允许我们通过 store 获取状态，这是手动方法不提供的。
Redux Saga
相较于 Redux Thunk 的较为基础的处理异步操作的方式，Redux Saga 是一种高级解决方案，它通过使用生成器函数和大量 Redux middleware 可以实现更复杂的异步操作，例如依次触发多个操作，根据状态取消操作并处理分布式事务等。
在 Redux Saga 中，我们可以将异步操作定义为 saga，saga 中使用非阻塞调用的方式执行异步操作，并封装 API 调用为 effect，在执行期间可以暂停、恢复和取消执行。
-- -------------------- ---- -------
------ - ---- ----------- ---- ---- - ---- ---------------------
--------- --------------- -
--- -
----- ---- - ----- ----------- -------------
----- ----- ----- --------------------- -------- ---- ---
- ----- ------- -
----- ----- ----- --------------------- -------- ----- ---
-
-
--------- ---------------- -
----- ------------------------ ---------------
-
------ ------- --------- ---------- -
----- -----
-----------------
---
-在此示例代码中，我们定义生成器函数 fetchDataSaga，使用 Redux Saga 的 effect call 调用 fetch API 并捕获返回值。
在发生错误时，我们使用 put effect 触发 FETCH_DATA_FAILURE action，如果没有错误发生，我们使用 put 触发成功的 FETCH_DATA_SUCCESS action。
最后，我们定义生成器函数 watchFetchData 监听 FETCH_DATA action，可以通过 takeLatest 等待最新触发的指定 action，和前面的两个解决方案相比，Redux Saga 中的异步操作更为高级。
结论
在 Redux 中，有多种方法来处理异步操作，有基础的手动方式、常用的 Redux Thunk 中间件以及更高级的 Redux Saga。我们可以根据情况选择不同的解决方案。
- 对于简单的异步请求操作，推荐使用 Thunk 解决方案，其提供的最简单的方式使我们能够处理异步请求，并且可以将请求代码统一封装到 action creators 中。
- Redux Saga 是一种高级的解决方案，对于更复杂的异步操作场景非常有用。
希望以上的解决方案示例代码和指导对你在 Redux 中处理异步操作有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67164fbaad1e889fe21bf2ea