Redux 是一个流行的 JavaScript 应用程序状态管理库，它让前端开发者可以更轻松地管理应用程序状态。Redux 中的 Action 是一个非常重要的概念，它代表着应用程序中的某个事件，例如用户点击按钮、从服务器获取数据等等。在 Redux 中，我们可以使用异步 Action 来处理这些事件，但是异步 Action 也会带来一些问题。在本文中，我们将介绍如何定位异步 Action 出现的问题，并提供一些实用的解决方案。
什么是异步 Action？
在 Redux 中，Action 是一个带有 type 属性的普通 JavaScript 对象，例如：
{
type: 'ADD_TODO',
payload: {
text: 'Learn Redux',
},
}Action 用于描述应用程序中发生的事件。Redux 中的 Action 都是同步的，也就是说它们会立即返回一个对象。但是有些事件需要异步处理，例如从服务器获取数据或者处理用户输入。这时，我们就需要使用异步 Action。
异步 Action 通常使用 Redux Thunk 中间件来实现。Thunk 中间件允许我们 dispatch 一个函数，而不是一个对象。这个函数可以执行异步操作，并在操作完成后 dispatch 一个普通的 Action。例如：
-- -------------------- ---- -------
-------- ------------ -
------ ------------------ -
---------- ----- --------------------- ---
------ -------------------
-------------- -- ----------------
---------- --
----------
----- ----------------------
-------- -
------ -----------
--
--
-
------------ --
----------
----- ----------------------
-------- -
------ --------------
--
--
--
--
-在上面的例子中，fetchTodos 函数返回的是一个函数，这个函数接收一个 dispatch 参数，用于 dispatch Action。fetchTodos 函数会 dispatch 一个 FETCH_TODOS_REQUEST Action，然后执行异步操作，最后 dispatch FETCH_TODOS_SUCCESS 或 FETCH_TODOS_FAILURE Action。
异步 Action 出现的问题
虽然异步 Action 在处理一些复杂的事件时非常有用，但是它们也会带来一些问题。下面是一些常见的问题：
Action 没有被 dispatch
在异步 Action 中，有可能会出现 Action 没有被 dispatch 的情况。这通常是因为异步操作出现了错误，导致 Action 没有被正确地 dispatch。例如：
-- -------------------- ---- -------
-------- ------------ -
------ ------------------ -
-------------------
-------------- -- ----------------
---------- --
----------
----- ----------------------
-------- -
------ -----------
--
--
-
------------ --
----------
----- ----------------------
-------- -
------ --------------
--
--
--
--
-在上面的例子中，如果 fetch('/api/todos') 函数出现了错误，那么 FETCH_TODOS_SUCCESS 或 FETCH_TODOS_FAILURE Action 就不会被 dispatch。
Action 被 dispatch 多次
在异步 Action 中，有可能会出现 Action 被 dispatch 多次的情况。这通常是因为异步操作出现了错误，导致 Action 被多次 dispatch。例如：
-- -------------------- ---- -------
-------- ------------ -
------ ------------------ -
---------- ----- --------------------- ---
-------------------
-------------- -- ----------------
---------- --
----------
----- ----------------------
-------- -
------ -----------
--
--
-
------------ --
----------
----- ----------------------
-------- -
------ --------------
--
--
-
-------- --
----------
----- -----------------------
--
--
--
-在上面的例子中，如果 fetch('/api/todos') 函数出现了错误，那么 FETCH_TODOS_FAILURE Action 会被 dispatch，但是 FETCH_TODOS_COMPLETE Action 也会被 dispatch，导致该 Action 被 dispatch 多次。
Action 被 dispatch 顺序不正确
在异步 Action 中，有可能会出现 Action 被 dispatch 顺序不正确的情况。这通常是因为异步操作的执行顺序与我们期望的不一致，导致 Action 的顺序出现了问题。例如：
-- -------------------- ---- -------
-------- ------------ -
------ ------------------ -
---------- ----- --------------------- ---
-------------------
-------------- -- ----------------
---------- --
----------
----- ----------------------
-------- -
------ -----------
--
--
--
----------
----- -----------------------
---
--
-在上面的例子中，如果 fetch('/api/todos') 函数执行比较慢，那么 FETCH_TODOS_COMPLETE Action 可能会在 FETCH_TODOS_SUCCESS Action 之前被 dispatch。
如何解决异步 Action 出现的问题
为了解决异步 Action 出现的问题，我们需要进行错误排查，并采取相应的解决方案。下面是一些常见的解决方案：
检查 Action 是否被 dispatch
如果 Action 没有被 dispatch，那么我们需要检查异步操作是否出现了错误。可以在 catch 块中打印错误信息，例如：
-- -------------------- ---- -------
-------- ------------ -
------ ------------------ -
-------------------
-------------- -- ----------------
---------- --
----------
----- ----------------------
-------- -
------ -----------
--
--
-
------------ -- -
---------------------
----------
----- ----------------------
-------- -
------ --------------
--
---
---
--
-在上面的例子中，如果 fetch('/api/todos') 函数出现了错误，那么错误信息会被打印出来，并且 FETCH_TODOS_FAILURE Action 会被 dispatch。
检查 Action 是否被 dispatch 多次
如果 Action 被 dispatch 多次，那么我们需要在 catch 块中添加一个 return 语句，以避免多次 dispatch。例如：
-- -------------------- ---- -------
-------- ------------ -
------ ------------------ -
---------- ----- --------------------- ---
-------------------
-------------- -- ----------------
---------- --
----------
----- ----------------------
-------- -
------ -----------
--
--
-
------------ -- -
---------------------
----------
----- ----------------------
-------- -
------ --------------
--
---
-------
--
-------- --
----------
----- -----------------------
--
--
--
-在上面的例子中，如果 fetch('/api/todos') 函数出现了错误，那么 FETCH_TODOS_FAILURE Action 会被 dispatch，但是 FETCH_TODOS_COMPLETE Action 不会被 dispatch。
使用 async/await 简化异步代码
使用 async/await 可以简化异步代码，使其更易于理解和调试。例如：
-- -------------------- ---- -------
----- -------- ------------ -
--- -
----- -------- - ----- --------------------
----- ---- - ----- ----------------
------ -
----- ----------------------
-------- -
------ -----------
--
--
- ----- ------- -
---------------------
------ -
----- ----------------------
-------- -
------ --------------
--
--
-
-在上面的例子中，我们使用 async/await 简化了异步代码，并且在 catch 块中打印了错误信息。
结论
在 Redux 中，异步 Action 是一个非常有用的概念，但是它们也会带来一些问题。为了解决这些问题，我们需要进行错误排查，并采取相应的解决方案。在本文中，我们介绍了如何定位异步 Action 出现的问题，并提供了一些实用的解决方案。当你遇到 Redux 异步 Action 的问题时，希望这篇文章能够帮助你解决问题。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6767702198e3e1ab1a77eed8