随着前端应用的复杂性不断增加，我们需要处理越来越多的异步数据。Redux 中提供了一些强大的工具来处理异步操作，如 Redux-thunk 和 Redux-saga 等。本文将介绍使用 Redux 处理并发的技巧以及常见问题的解决方式。
Redux-thunk
Redux-thunk 是一个 Redux 中间件，它允许我们在 Redux Action 中使用异步操作。通过 thunk，我们可以在 Action 中执行异步操作并在操作完成后发送新的 Action。
例如，我们想要从服务器获取一些数据并将其存储在 Redux Store 中：
------ ----- --------- - -- -- -
------ ---------- -- -
---------- ----- ------------------ ---
----------------------
-------------- -- -
---------- ----- --------------------- -------- ------------- ---
--
------------ -- -
---------- ----- ------------------ ---
---
--
-上面的代码中，我们通过 axios 库来发送 HTTP 请求，并在请求完成后发送新的 Action。这个例子中我们使用了 Redux-thunk 中间件，并在 Action 中返回了一个函数而不是一个普通对象。这个函数在调用时接收 dispatch 和 getState 函数作为参数。
Redux-saga
Redux-saga 是另一个 Redux 中间件，它允许我们使用基于 Generator 的代码来处理异步操作。Saga 是一些可以和 Redux Store 交互的 Generator 函数。Saga 可以在我们指定某些条件下自动执行，例如在用户提交表单时执行一个异步操作。
一个简单的 Redux-saga 例子：
------ - ----- ---- --------- - ---- ---------------------
------ - ----------------- -------------- - ---- -------------------
------ --------- ----------- -
--- -
----- -------- - ----- ----------- -------------
----- ---- - ----- ----------------
----- ----------------------------
- ----- ------- -
----- ----------------------
-
-
------ --------- ---------- -
----- ------------------------------- -----------
-上面的代码中，我们定义了一个 Saga，它可以处理 FETCH_DATA_REQUEST Action。当这个 Action 发生时，fetchData Saga 将被自动调用。在这个 Saga 中，我们使用 fetch 来发送 HTTP 请求，并将服务器响应解析为 JSON 格式。在请求完成后，我们派发一个 fetchDataSuccess 或 fetchDataError Action 来更新 Redux Store。
并发处理
在需要并发处理多个异步操作时，通过 Redux-thunk 和 Redux-saga 提供的工具，我们可以轻松地同时发出多个异步请求。
使用 Redux-thunk 并发请求：
------ ----- ----------------- - -- -- -
------ -------- -- -
-------------
------------------------
------------------------
------------------------
--
------------------ ---------- ----------- -- -
---------- ----- ------------------------------ -------- -
------ ---------------
------ ---------------
------ ---------------
----
--
------------ -- -
---------- ----- --------------------------- ---
---
--
-上面的代码使用 Promise.all 方法来同时发送多个 HTTP 请求，并在所有请求完成后将结果作为一个数组返回。这里我们还使用了一种不同的 Action 形式，将所有数据存储在一个对象中。
使用 Redux-saga 并发请求：
------ - ---- ----- --- - ---- ---------------------
------ - ----------------- -------------- - ---- -------------------
------ --------- ------------------- -
--- -
----- ------- ------ ------ - ----- -----
----------- --------------
----------- --------------
----------- --------------
---
----- ---------------------- ------ ------ ----- ----
- ----- ------- -
----- ----------------------
-
-这个例子中，我们使用了 all 函数将多个 Generator 函数组合在一起，并在所有函数执行完毕后再执行下一步。通过使用 call effect，我们可以以同步的方式调用异步函数并返回其结果。
常见问题
- 我无法在 Action 中获取正确的 State？
可能是因为 Action 中间件的顺序不正确。确保 redux-thunk 或 redux-saga 中间件在最后一个位置。这是因为这些中间件将更改 Action 状态并将其传递到下一个中间件。
- 我的 Request 不起作用？
确保你正确地使用了异步操作，确保你的请求有效并且网络连接可用。在 Chrome DevTools 中查看 Network 标签可以帮助你调试这个问题。
- 我的 Saga 不被调用？
确保你正确地使用了 takeEvery 或 takeLatest，在 generator 函数上使用了 *。检查是否正确地注册了 Saga。
- 我的 Action 无法 dispatch？
请确保你调用 dispatch 方法，并确保你的 reducer 中定义了相应的 case。
总结
Redux-thunk 和 Redux-saga 是处理异步操作的两种最常用的 Redux 中间件。当处理多个请求时，Promise.all 和 all effect 允许我们发出多个异步操作并获得结果数组。在手动处理异步操作时，请确保你的代码处理错误，并尽可能使用最新的 ECMAScript 特性和 TypeScript 类型定义。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/64e419b9f6b2d6eab3f74a6d