前言
Redux 是 React 生态系统中最受欢迎的状态管理库之一，它提供了一种可预测的状态管理方式，为复杂应用程序的状态管理带来了极大的便利。然而，在实际应用中，我们经常需要发起异步操作来获取数据，这就导致了 Redux 的 action Creator 可能会变得更加复杂。本文将介绍在使用 Redux 异步 action 时可能会遇到的问题，并提供相应的解决方法。
问题分析
在 Redux 中，action 是一种包含了应用程序中所需变化信息的简单对象。在异步操作中，我们需要发起网络请求或执行其他操作，并根据操作结果构造 action，而这种异步操作可能涉及到复杂的流程和状态更新。
下面我们通过示例代码来说明这个问题。假设我们要实现一个简单的 TodoList 应用，其中需要从服务器上获取 Todo 项的列表，并实现添加、删除和修改 Todo 项的功能。
-- -------------------- ---- -------
-- ----------
----- ---------- - -- -- -
------ -------- -- -
---------- ----- --------------------- ---
------ -------------------
-------------- -- ----------------
----------- -- -
---------- ----- ---------------------- -------- ----- ---
--
------------ -- -
---------- ----- ---------------------- -------- ----- ---
---
--
--
----- ------- - ---- -- --
----- -----------
-------- -
--- --- -----------------
-----
---------- -----
-
---
----- ---------- - -- -- --
----- --------------
-------- -
--
-
---
----- ---------- - -- -- --
----- --------------
-------- -
--
-
---
-- -----------
----- ------------ - ------ - --- ------- -- -
------ ------------- -
---- -----------
------ ---------- ----------------
---- --------------
------ ----------------- -- ------- --- -------------------
---- --------------
------ -------------- -- -
-- -------- --- ------------------ -
------ -
--------
---------- ---------------
--
-
------ -----
---
---- ----------------------
------ ---------------
--------
------ ------
-
--在上面的示例代码中，actions.js 中定义了四个 action Creator，包括 fetchTodos、addTodo、deleteTodo 和 toggleTodo。其中，fetchTodos 是一个异步 action Creator，它可以发起网络请求来获取 Todo 项的列表。在我们调用 fetchTodos 时，它会首先 dispatch 一个类型为 FETCH_TODOS_REQUEST 的 action，表示正在获取 Todos，然后再异步地发起网络请求。在请求成功时，它会 dispatch 一个类型为 FETCH_TODOS_SUCCESS 的 action，并在 action 的 payload 字段中携带返回的 Todos 列表。在请求失败时，它会 dispatch 一个类型为 FETCH_TODOS_FAILURE 的 action，并在 action 的 payload 字段中携带错误信息。
在 reducers.js 中，我们定义了一个纯函数 todosReducer，它接收一个 state 参数和一个 action 参数，然后根据 action.type 的值进行不同的操作。当状态中的 Todos 列表需要更新时，我们可以通过 dispatch 一个合适的 action 来触发 todosReducer 的更新，并根据 action 中的 payload 字段来更新状态。
以上就是我们可以编写的基本的 Redux 应用程序模板。但是，当我们需要进行异步操作时，很可能会遇到下面的问题。
问题一：如何触发异步操作
针对上面的示例代码，我们可以通过调用 store.dispatch(fetchTodos()) 来触发异步操作。然而，这并不是最佳的实现方式。因为 store.dispatch 可能会被多个组件同时调用，而我们很可能只需要在应用启动时自动触发一次异步操作。
这种情况下，我们可以使用 Redux 中间件来实现自动触发异步操作。一个常见的做法是在应用程序启动时调用 store.dispatch(fetchTodos())，同时使用一个中间件在 action 中过滤掉不必要的 action。具体的实现方式如下：
-- -------------------- ---- -------
-- -------------
----- ------------ - ----- -- ---- -- ------ -- -
-- --------------------- -
-- --- ------------ --
----- - ------------- ------- - - -------
---------------------
- ---- -
-------------
-
--
-- --------
----- ----- - ------------------------- ----------------------------- --------
---------------- ----- ---------------------- ------------- ---- ---在上面的示例代码中，我们定义了一个叫做 autoDispatch 的中间件，它会自动 dispatch action，并将其中的 autoDispatch 属性过滤掉。使用这个中间件后，我们可以将 store.dispatch({ type: 'FETCH_TODOS_REQUEST', autoDispatch: true }) 放在应用程序启动时的入口处，从而自动发起一次异步操作。
问题二：如何处理异步操作结果
异步操作完成后，我们需要将操作结果映射成一个 Redux action，并将其 dispatch 到相应的 reducer 中。有两种常用的做法。
第一种做法是在 action Creator 中直接 dispatch action。这种做法十分直观，代码也比较简单。
-- -------------------- ---- -------
-- ----------
----- ---------- - -- -- -
------ -------- -- -
---------- ----- --------------------- ---
------ -------------------
-------------- -- ----------------
----------- -- -
---------- ----- ---------------------- -------- ----- ---
--
------------ -- -
---------- ----- ---------------------- -------- ----- ---
---
--
--
-- ----------------------
----- -------- ------- --------------- -
------------------- -
------------------------
-
-------- -
----- - ----- - - -----------
------ -
----
--------------- -- -
--- ------------------------------
---
-----
--
-
-
----- --------------- - ----- -- --
------ -----------
---
------ ------- ------------------------ - ---------- -------------在上面的示例代码中，我们在 fetchTodos action Creator 中直接 dispatch 了 FETCH_TODOS_REQUEST、FETCH_TODOS_SUCCESS 和 FETCH_TODOS_FAILURE 这三种 action 中的一种，这使得它的实现变得十分简单。在组件的 componentDidMount 生命周期函数中，我们调用了 fetchTodos action Creator 来发起异步操作。
第二种做法是将异步操作和 action 的构造分开，在异步操作完成后再 dispatch action。这种做法可以将异步操作的实现和应用程序的状态管理分开，代码结构更加清晰。
-- -------------------- ---- -------
-- ----------
----- ----------------- - -- -- --
----- ---------------------
---
----- ----------------- - ----- -- --
----- ----------------------
-------- -----
---
----- ----------------- - ----- -- --
----- ----------------------
-------- -----
---
----- ---------- - -- -- -
------ -------- -- -
------------------------------
------ -------------------
-------------- -- ----------------
----------- -- -
-----------------------------------
--
------------ -- -
-------------------------------------------
---
--
--
-- ----------------------
----- -------- ------- --------------- -
------------------- -
----- - ------------------ ------------------ ----------------- - - -----------
--------------------
-------------------
-------------- -- ----------------
----------- -- -
-------------------------
--
------------ -- -
---------------------------------
---
-
-------- -
----- - ----- - - -----------
------ -
----
--------------- -- -
--- ------------------------------
---
-----
--
-
-
----- --------------- - ----- -- --
------ -----------
---
------ ------- ------------------------ - ------------------ ------------------ ----------------- -------------在上面的示例代码中，我们将 fetchTodosRequest、fetchTodosSuccess 和 fetchTodosFailure action Creator 用于创建 action，并将它们作为 props 传递给了组件。在 componentDidMount 中，我们首先 dispatch 了 fetchTodosRequest action 表示正在获取 Todos 项，然后发起异步请求，如果请求成功，我们就 dispatch 了 fetchTodosSuccess action，反之则 dispatch 了 fetchTodosFailure action，从而更新了应用程序的状态。
总结
使用 Redux 进行异步操作需要我们针对具体的应用场景进行相应的实现。我们可以通过使用 Redux 中间件自动触发异步操作，也可以将异步操作的实现和 action 的构造分开。在具体实现中，我们需要注意 action 的设计以及对应的 reducer 的设计，从而保证状态管理的可预测性和灵活性，并提高应用程序的可维护性。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64701454968c7c53b0e396ca