在前端开发中，我们经常会遇到需要进行多个异步请求的情况。而在使用 Redux 进行状态管理时，由于 Redux 的单一数据源和纯函数的特性，我们需要一些技巧来解决多个异步请求之间的问题。
问题描述
假设我们需要从后端获取用户信息和用户订单信息，然后将它们合并到一个对象中，最终将该对象存储到 Redux 中。在这个过程中，我们需要处理以下问题：
- 如何确保两个异步请求都已经完成，才能将它们合并到一起？
- 如何处理两个异步请求返回的数据结构不同？
解决方法
1. 使用 Promise.all
我们可以使用 Promise.all 来确保两个异步请求都已经完成。具体来说，我们可以在 action 中创建两个 Promise，分别代表用户信息和用户订单信息的异步请求。然后，在 Promise.all 中将这两个 Promise 合并起来，等待它们都完成后再进行下一步操作。
-- -------------------- ---- -------
------ ----- ------------- - -- -- -
------ ---------- -- -
----- ----------- - ------------
----- ------------ - -------------
------------------------- --------------------------- ------- -- -
-- -----------
----- ---------- - --------------------------- -------
-- ---------- ----- -
---------- ----- ---------------- ----- ---------- ---
---
--
--2. 使用 Redux-thunk
在 Redux 中，我们可以使用 Redux-thunk 中间件来处理异步操作。具体来说，我们可以在 action 中返回一个函数，这个函数可以接收一个 dispatch 参数，然后在异步请求完成后再调用 dispatch 函数，将数据存储到 Redux 中。
-- -------------------- ---- -------
------ ----- ------------- - -- -- -
------ ---------- -- -
----------------------- -- -
------------------------- -- -
-- -----------
----- ---------- - --------------------------- -------
-- ---------- ----- -
---------- ----- ---------------- ----- ---------- ---
---
---
--
--3. 使用 Redux-saga
Redux-saga 是一个用于管理应用程序副作用（例如异步请求和访问浏览器缓存）的库。它使用了 ES6 的 Generator 函数来处理异步操作，使得代码更加可读和易于维护。
在 Redux-saga 中，我们可以使用 takeEvery 和 call 函数来处理异步请求。具体来说，我们可以在 Saga 中创建两个 Generator 函数，分别代表用户信息和用户订单信息的异步请求。然后，在主 Saga 中使用 takeEvery 监听一个 action，当该 action 被触发时，调用这两个 Generator 函数，等待它们都完成后再进行下一步操作。
-- -------------------- ---- ------- ------ - ---------- ----- --- - ---- --------------------- ------ --------- --------------- - ----- ---- - ----- ---------------- ------ ----- - ------ --------- ---------------- - ----- ----- - ----- ----------------- ------ ------ - ------ --------- ------------------- - ----- ------ ------ - ----- ------------------------- ----------------------- -- ----------- ----- ---------- - --------------------------- ------- -- ---------- ----- - ----- ----- ----- ---------------- ----- ---------- --- - ------ --------- -------------------- - ----- ---------------------------- ------------------- -
结论
在 Redux 中解决多个异步请求之间的问题，我们可以使用 Promise.all、Redux-thunk 或 Redux-saga。这些方法都有其优劣之处，具体使用哪一种方法取决于具体的业务需求和团队技术水平。无论使用哪种方法，我们都需要注意处理异步请求返回的数据结构不同的情况，以确保数据能够正确地合并到一起。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/675f8022e49b4d0716252634