Redux 如何处理多个异步请求的并发问题？
前言
在 Web 开发中，异步请求的并发是十分常见的，如何在 Redux 中优雅地处理这一问题是值得我们深入探讨的。
Redux 如何实现异步请求？
Redux 本身并不支持异步请求，但可以借助一些第三方库来实现。常见的库有 redux-thunk、redux-saga 和 redux-observable 等。
本文将以 redux-thunk 为例来说明，其它库的实现方式也类似。
- 安装 redux-thunk
首先，我们需要安装 redux-thunk 库：
npm install redux-thunk --save
- 创建 Action
在 action 中，我们可以调用异步操作的方法，例如发起网络请求。
示例代码：
-- -------------------- ---- -------
------ ----- ------------------- - ---------------------
------ ----- ------------------- - ---------------------
------ ----- ------------------- - ---------------------
-------- ------------------- -
------ -
----- -------------------
-
-
-------- ------------------------ -
------ -
----- --------------------
-----
-
-
-------- ------------------------ -
------ -
----- --------------------
-----
-
-
------ -------- ------------ -
------ ------------------ -
-----------------------------
------ -------------------
--------- -- -----------
---------- -- ----------------------------------
------------ -- -----------------------------------
-
-- 创建 Reducer
在 reducer 中，我们根据不同的 action.type 来进行状态更新。
示例代码：
-- -------------------- ---- -------
------ -
--------------------
--------------------
-------------------
- ---- ------------
----- ------------ - -
----------- ------
------ ---
------ ----
-
------ ------- -------- ------------------ - ------------- ------- -
------ ------------- -
---- --------------------
------ -
---------
----------- ----
-
---- --------------------
------ -
---------
----------- ------
------ ------------
-
---- --------------------
------ -
---------
----------- ------
------ ------------
-
--------
------ -----
-
-- 创建 Store
在 createStore 中，我们需要将 middleware 添加到 enhancer 中。
示例代码：
import { createStore, applyMiddleware } from 'redux'
import thunk from 'redux-thunk'
import reducers from './reducers'
const store = createStore(reducers, applyMiddleware(thunk))
export default store上述代码中，applyMiddleware(thunk)表示将 middleware 添加到 enhancer 中。
Redux 如何处理多个异步请求的并发问题？
在实际开发中，我们常常需要进行多个异步请求，如何在 Redux 中优雅地处理这一问题呢？
以下是一些解决方案：
- Promise.all
如果多个请求不需要互相依赖，可以使用 Promise.all 来处理。
示例代码：
-- -------------------- ---- -------
-------- -------------------- -
------ ------------------ -
--------------------------------- ---------------------
-------------- ------- -- -------------------------- ---------------
-------------- ------- -- -
----------------------------------
----------------------------------
--
------------ -- -------------------------------------------
-
-上述代码中，Promise.all 会等待所有请求都响应才会调用 .then，即使其中一个请求失败也会执行 .catch。
- Redux-saga
如果多个请求之间存在依赖关系，比如需要先请求用户列表再请求每个用户的详细信息，可以使用 redux-saga 来处理。
示例代码：
-- -------------------- ---- -------
--------- ---------------------- -
--- -
----- ----- - ----- ----------- -------------
----- --------- - ----- ------------ ------------
----- ---------------------------------
--- ---- ---- -- ---------- -
----- ------- - ----- ----------- --------------------------------
----- ----------- - ----- -------------- --------------
----- -----------------------------------------
-
- ----- ------- -
----- ---------------------------------------
-
-
--------- ----------- -
----- ------------------------------------------ ---------------------
-上述代码中，我们使用 redux-saga 来管理异步流程，fetchUsersAndDetails 函数中，我们首先请求用户列表，然后根据用户列表中的每个用户的 id 来请求详细信息，最终将数据保存到 store 中。如果任何一步请求失败，就会执行 catch 语句。
结论
Redux 虽然本身不支持异步请求，但是使用第三方库可以轻松实现。在处理多个异步请求的并发问题上，我们可以使用 Promise.all 或者 redux-saga 来处理。在具体开发中，我们应该根据具体情况来选择不同的方案，以达到最优的效果。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/66ff8e7b1b0bf82c71cbe2ce