随着 Web 应用程序的复杂性越来越高，管理前端应用程序状态的重要性也越来越明显。由于单向数据流模型的优点，在管理应用程序状态时 Redux 已经被广泛采用。Redux 可以方便地管理应用程序状态，并使其易于测试和重用。
然而，Redux 在处理异步操作时需要遵循一些特殊的模式和最佳实践，以避免出现死循环、内存泄漏或其他问题。这篇文章将探讨 Redux 的异步处理方式及其最佳实践，并提供一些示例代码。
Redux 异步流程
在 Redux 中，异步处理分为两种类型：simple 异步和 complex 异步。Simple 异步通常是基于 promise 实现的，而 complex 异步需要在多个 action 和 reducer 中协调执行。
Simple 异步
在 Redux 中，使用中间件进行异步操作处理。通过使用中间件，我们可以捕捉并拦截发起的 action，并在需要时对其进行修改。在 simple 异步处理中，我们只需要关注单个 action 对应的异步操作即可。
以下是一个使用 redux-thunk 中间件来处理异步操作的示例：
-- -------------------- ---- -------
------ - ------------ ---------------- --------------- - ---- --------
------ --------------- ---- --------------
------ - ---------- - ---- ------------
-- -------
-------- ----------- - --- ------- -
------ ------------- -
---- ----------------
------ -------------
--------
------ ------
-
-
----- ----------- - -----------------
------
---
-- ----------
----- ---------- - ------------------
-- -----
----- ----- - ------------
------------
------------------------------
--
-- ----- -----
-----------------------------上述示例中的 fetchPosts 函数是一个 action 创建函数，它将被 thunkMiddleware 捕获并用于执行异步操作，在异步操作完成时将 dispatch RECEIVE_POSTS action，该 action 将对应的列表存储在 Redux store 的 posts 状态中。
-- -------------------- ---- -------
-- ------ -------
------ -------- ------------ -
------ ---------- -- -
------ -------------------
---------------- -- -
------ ----------------
--
------------ -- -
---------- ----- ---------------- ------ ---- ---
---
--
-Complex 异步
当需要在 Redux 中处理 complex 异步时，可能需要在多个 action 和 reducer 中协调异步操作。在这种情况下，可以使用 Redux Thunk 或 Redux Saga 等中间件来处理。
以下是一个使用 Redux Saga 处理 complex 异步的示例：
-- -------------------- ---- -------
------ - ------------ ---------------- --------------- - ---- --------
------ -------------------- ---- -------------
------ - ---------- ----- --- - ---- ---------------------
------ - --------------- -------------- - ---- ------------
-- -------
-------- ---------- - --- ------- -
------ ------------- -
---- -------------------
------ ------------
--------
------ ------
-
-
----- ----------- - -----------------
-----
---
-- -----
--------- -------------- -
----- ----------------------------- ---------
-
--------- --------- -
--- -
----- -------- - ----- ----------- -------------
----- ---- - ----- ----------------
----- --------------------------
- ----- --- -
----- -------------------------------
-
-
-- ----------
----- -------------- - -----------------------
-- -----
----- ----- - ------------
------------
-------------------------------
--
-- ----- -----
---------------------------------
-- --- ----
---------------- ----- ------------------ ---在上述示例中，watchGetUser 是一个 Saga，用于监听 GET_USER_REQUEST action。当 action 被触发时，getUser 被派发以处理异步逻辑，并根据异步操作的结果派发 getUserSuccess 或 getUserFailure action。
-- -------------------- ---- ------- -- ------ -------- ------ -------- ---------------- - ------ - ----- ------------------ -- - ------ -------- -------------------- - ------ - ----- ------------------- ---- -- - ------ -------- --------------------- - ------ - ----- ------------------- ----- -- -
最佳实践
以下是一些遵循 Redux 最佳实践的建议。
将异步操作放在 action creator 中
异步操作应该始终放在 action creator 中。这样可以使 reducer 更加专注于处理 action、更新状态和生成新状态。
-- -------------------- ---- -------
-- ---
----- ------------- ------- --------------- -
------------------- -
------------------
---------------- -- -
------ ----------------
--
------------ -- -
--------------------- ----- --------------- ----- ---- ---
---
-
-------- -
------ -
---------------------------------
--
-
-
------ ------- --------------- -- --
----- -----------
-------------------
-- --
-- ----------
------ -------- ----------- -
------ ---------- -- -
------ ------------------
---------------- -- -
------ ----------------
--
------------ -- -
---------- ----- --------------- ----- ---- ---
---
--
-
-- ----------------
----- ------------- ------- --------------- -
------------------- -
---------------------------------
-
-------- -
------ -
---------------------------------
--
-
-
------ ------- --------------- -- --
----- -----------
-------------------使用中间件优化异步处理
Redux 中间件可以捕获和处理 action，这使得它们非常适合进行异步操作的处理。当您需要在 action 中执行异步操作时，使用 redux-thunk 或 redux-saga 等中间件是最佳实践。
-- -------------------- ---- -------
-- ----------
------ -------- ----------- -
------ ---------- -- -
---------- ----- -------------- ---
------ ------------------
---------------- -- -
------ ----------------
--
------------ -- -
---------- ----- --------------- ----- ---- ---
---
--
-
-- --------
----- ---------- - ------------------
-- --------
--------- ---------------- -
----- ----------------------- ---------------
-
--------- --------------- -
----- ----- ----- -------------- ---
--- -
----- -------- - ----- ----------- -------------
----- ---- - ----- ----------------
----- ----- ----- --------------- ----- ---- ---
- ----- --- -
----- ----- ----- --------------------- ------ --------- ---
-
-
----- -------------- - -----------------------
-- ----------
-------- ---------- - - ---------- ------ ----- ----- ------ ---- -- ------- -
------ ------------- -
---- ---------------
------ - --------- ---------- ---- --
---- ---------------
------ - --------- ---------- ------ ----- ----------- --
---- ---------------------
------ - --------- ---------- ------ ------ ------------ --
--------
------ ------
-
-避免在 reducer 中执行异步操作
Redux reducer 应该是纯函数。这意味着 reducer 应该只接受 state 和 action 作为输入，并始终返回新的状态对象。任何异步操作都应该在 action creator 或中间件中执行。
-- -------------------- ---- -------
-- ---
-- ----------
-------- ----------- - - ---------- ------ ----- -- -- ------- -
------ ------------- -
---- ----------------
------ - --------- ---------- ---- --
---- ----------------
------ - --------- ---------- ------ ----- ----------- --
---- ------------
-------------------
---------------- -- ----------------
------------ -- -
---------- ----- ---------------- ---- ---
---
------ ------
--------
------ ------
-
-
-- --
-- ----------
------ -------- ------------ -
------ ---------- -- -
---------- ----- --------------- ---
------ -------------------
---------------- -- ----------------
------------ -- -
---------- ----- ---------------- ---- ---
---
--
-
-- ----------
-------- ----------- - - ---------- ------ ----- -- -- ------- -
------ ------------- -
---- ----------------
------ - --------- ---------- ---- --
---- ----------------
------ - --------- ---------- ------ ----- ----------- --
--------
------ ------
-
-结论
在 Redux 中处理异步操作是非常常见的，但也经常会出现一些问题。通过使用与 Redux 兼容的中间件，可以避免一些问题，并确保正确处理异步操作。最佳实践包括将异步操作放在 action creator 中、优化异步处理和避免在 reducer 中执行异步操作等。希望这篇文章对您在处理 Redux 中的异步操作时有所帮助！
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6735d78c0bc820c58250c74b