Redux 是一个流行的 JavaScript 应用程序状态管理库，它可以帮助开发人员管理复杂的应用程序状态。在许多应用程序中，异步请求是非常常见的操作，如何在 Redux 中正确处理异步请求是非常重要的。
为什么需要异步请求
在许多应用程序中，数据都是异步获取的，例如从服务器获取数据。如果我们使用同步请求，那么用户界面会被阻塞，直到请求完成。这会导致用户界面变得缓慢和不响应，给用户带来极差的体验。
异步请求可以让我们在后台发送请求，同时保持用户界面的响应性。当请求完成时，我们可以更新 Redux store 中的状态，并重新渲染用户界面。
Redux 中的异步请求
Redux 本身不支持异步操作，但是我们可以使用 Redux middleware 来处理异步请求。常用的 Redux middleware 包括 Redux Thunk、Redux Saga、Redux Observable 等。
Redux Thunk
Redux Thunk 是一个非常流行的 Redux middleware，它可以让我们在 Redux action 中使用异步代码。Thunk 函数是一个接受 dispatch 和 getState 函数作为参数的函数，它可以在函数体内部执行异步操作，并在操作完成后调用 dispatch 函数来更新 Redux store 中的状态。
下面是一个使用 Redux Thunk 处理异步请求的示例代码：
-- -------------------- ---- -------
-- -- ------ -------
----- --------- - -------- -- -
------ ---------- --------- -- -
---------- ----- -------------------- ---
------------------------------------------------
-------------- -- ----------------
---------- -- -
---------- ----- --------------------- -------- ---- ---
--
------------ -- -
---------- ----- --------------------- -------- ----- ---
---
--
--
-- -- ------ -------
-------------------------在上面的代码中，fetchUser 是一个 Thunk 函数，它接受 userId 作为参数，并返回一个函数。返回的函数接受 dispatch 和 getState 函数作为参数，它内部执行异步操作并调用 dispatch 函数来更新 Redux store 中的状态。
Redux Saga
Redux Saga 是另一个流行的 Redux middleware，它使用 ES6 的 generator 函数来处理异步请求。Saga 函数是一个 generator 函数，它可以在函数体内部执行异步操作，并使用 put 函数来调用 Redux action 来更新 Redux store 中的状态。
下面是一个使用 Redux Saga 处理异步请求的示例代码：
-- -------------------- ---- -------
-- -- ----
--------- ----------------- -
--- -
----- ----- ----- -------------------- ---
----- ---- - ----- ----------- -------------------------------------------
----- ----- ----- --------------------- -------- ---- ---
- ----- ------- -
----- ----- ----- --------------------- -------- ----- ---
-
-
-- -- ------
--------- ---------------- -
----- ----------------------- -----------
-
-- -- ----
--------- ---------- -
----- -----
-----------------
---
-
-- -- ------
---------- ----- ------------- -------- --- ---在上面的代码中，fetchUser 是一个 Saga 函数，它接受 userId 作为参数，并使用 put 和 call 函数来调用 Redux action 和执行异步操作。watchFetchUser 函数监听 FETCH_USER action，并在 action 被调用时执行 fetchUser 函数。rootSaga 函数启动所有的 saga。
Redux Observable
Redux Observable 是另一个流行的 Redux middleware，它使用 RxJS 来处理异步请求。Epic 函数是一个接受 action 和 store 作为参数的函数，它可以使用 RxJS 操作符来处理异步请求，并返回一个 Observable 对象来更新 Redux store 中的状态。
下面是一个使用 Redux Observable 处理异步请求的示例代码：
-- -------------------- ---- -------
-- -- ----
----- ------------- - --------- ------- -- -
------ -------------
---------------------
---------------- -- -
------ ---------------------------------------------------------------------
-------- -- -- ----- --------------------- -------- ---- ----
---------------- -- ---- ----- --------------------- -------- ----- ----
--
---
--
--
-- -- ----
----- -------- - -------------
--------------
--
----- -------------- - -----------------------
----- ----- - ------------
------------
--------------------------------
--
-----------------------------
-- -- ------
---------- ----- ------------- -------- --- ---在上面的代码中，fetchUserEpic 是一个 Epic 函数，它使用 RxJS 操作符来处理异步请求。rootEpic 函数启动所有的 epic。epicMiddleware 是 Redux middleware，它使用 rootEpic 来处理异步请求。
结论
在 Redux 中正确处理异步请求是非常重要的。我们可以使用 Redux middleware 来处理异步请求，常用的 Redux middleware 包括 Redux Thunk、Redux Saga、Redux Observable 等。使用 Redux middleware 可以让我们在后台发送请求，同时保持用户界面的响应性。当请求完成时，我们可以更新 Redux store 中的状态，并重新渲染用户界面。
参考资料
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/675a43eaeea933d9cc2f3135