Redux 是一种用于 JavaScript 应用程序的可预测状态容器。 它为您的应用程序提供可预测性，可维护性和可调试性。 Redux 具有许多插件和中间件，可以使开发过程变得更容易。
在 Redux 中，将所有的状态（state）集中存储在单个 store 中。Redux 中的 action 是一个普通 JavaScript 对象，用于描述发生了什么事件。middleware 是 action 和 reducer 之间的中间处理机制。可以使用 middleware 处理异步操作，以及应用其他非规范性行为的操作。
在本文中，我们将详细讲解 Redux 中间件派发的异步 Action，并提供一些代码示例和指导意义。
异步 Action 是什么？
异步 Action 是一个带有异步操作的 Action。 它使用异步函数处理事件，例如 AJAX 请求、WebSocket 连接等。 这是一种处理 Redux 中异步操作的方式。 在使用异步 Action 之前，让我们先简单回顾 Redux 基础知识。
Redux 基础知识
Redux 的基础知识包括以下内容：
- action
- reducer
- store
- dispatch
action
action 是一个包含 type 属性的普通对象，用于描述应用程序中发生了什么事件。 type 属性由应用程序开发人员定义。
下面是一个示例 action：
-
----- ---------
-------- ------ ------
-在上面的代码中，type 属性是 ADD_TODO，payload 是要添加的 todo。
reducer
reducer 是处理 action 的函数。它接收当前状态和 action ，并返回新状态。
下面是一个示例 reducer：
----- ------------ - ---
-------- ----------------- - ------------- ------- -
------ ------------- -
---- ---------
------ ---------- ----------------
---- ------------
------ ----------------- -- ---- --- ----------------
--------
------ ------
-
-在上面的代码中，todoReducer 处理两个不同的 action 类型，ADD_TODO 和 REMOVE_TODO。 ADD_TODO 的作用是添加新的 todo，REMOVE_TODO 的作用是从 todo 列表中移除已完成的 todo。
store
store 是 Redux 中存储应用程序状态的地方。 state 中的数据由 reducer 处理，并且可以在任何地方从 store 中访问。
下面是一个示例 store：
------ - ----------- - ---- -------- ------ ----------- ---- ------------------------- ----- ----- - ------------------------- ------ ------- ------
在上面的代码中，我们使用了 Redux 中的 createStore 方法创建了 store。
dispatch
dispatch 是 Redux 中一个异步操作的方法。它接收一个 action，并将其发送到 reducer。 dispatch 方法通常用于在 React 中更新视图。
下面是一个示例 dispatch 方法：
----- ------- - ------ -- -
----------------
----- ---------
-------- ----
---
-在上面的代码中，当调用 addTodo 方法时，将会向 reducer 创建一个 ADD_TODO 的 action。 这是一个同步操作，但 Redux 中间件可以处理异步操作，例如 AJAX 调用。
Redux 中间件派发异步 Action 的步骤
在 Redux 中，使用 middleware 处理异步操作的步骤如下：
- 创建一个 middleware。
- 在 applyMiddleware 中使用 middleware。
- 在 action 中使用异步操作。
- 触发 action 并在 middleware 中处理异步操作。
- 当异步操作完成时，在 middleware 中创建一个新的 action，并使用 dispatch 方法发出它。
现在，我们将一步一步地了解这些步骤。
1. 创建一个 middleware
middleware 是一个函数，它接收一个 store 的 dispatch 方法作为参数，并返回一个新的函数。
----- ------------ - ----- -- ---- -- ------ -- -
-- ---------- -----
--在上面的代码中，myMiddleware 接收一个 store 实例，并返回一个函数，该函数接收 next 和 action 作为参数。 next 是一个函数，用于将 action 传递给下一个 middleware 或 reducer。
2. 在 applyMiddleware 中使用 middleware
applyMiddleware 是 Redux 中使用 middleware 的函数。
------ - ---------------- ----------- - ---- -------- ------ ----- ---- -------------- ------ ----------- ---- ------------------------- ----- ----- - ------------------------ ------------------------
在上面的代码中，我们使用 applyMiddleware 方法将 thunk middleware 应用于 store。
3. 在 action 中使用异步操作
我们可以使用异步操作来派发 action，例如 AJAX 调用。 在这种情况下，我们不能像通常那样创建一个 action，然后通过 store.dispatch 将其发送给 reducer。
相反，我们需要在 action 中使用异步操作，例如 promise：
----- ---------- - -- -- -
------ -------- -- -
---------------------------------------------------
-------------- -- ----------------
----------- -- -
----------
----- --------------
-------- -----
---
--
-
-在上面的代码中，fetchTodos 是一个返回一个函数的 action。该函数接收一个 dispatch 方法并使用它来派发 action。 在这种情况下，我们使用 fetch API 获取数据，然后在 promise resolved 时派发 action。
4. 触发 action 并在 middleware 中处理异步操作
现在，我们需要派发 fetchTodos action 并处理异步操作。
-----------------------------
在上面的代码中，我们使用 store.dispatch 初始化异步操作。 它将启动 middleware 并触发 fetchTodos action。 下一步是在 middleware 中处理异步操作。
5. 当异步操作完成时，在 middleware 中创建一个新的 action
在上面的代码中，我们启动了 middleware 中的异步操作。 现在，我们需要在 middleware 中处理操作并创建新的 action。 请注意，下一个 middleware 或 reducer 将不会处理原始 action，而是处理新的 action。
----- ------------ - ----- -- ---- -- ------ -- -
-- ------- ------ --- ----------- -
------ -----------------------
-
------ -------------
--在上面的代码中，我们向 myMiddleware 添加了逻辑来处理异步操作。 如果 action 是一个函数，那么我们调用它并将 store.dispatch 作为一个参数传递。 并且我们不会将原始操作传递给下一个 middleware 或 reducer。
这是一个简单的示例，您可以根据需要添加更多逻辑。 这并不是 Redux 处理异步操作的唯一方式。 Redux 中还有其他中间件可用。
Redux 中间件派发的异步 Action 的指导意义
- 使用 Redux 中间件可以简化应用程序中的异步操作处理。
- 使用 Redux 中间件可以有助于开发人员处理异步错误处理和优化性能。
- Redux 中间件提供了处理非规范性操作的途径，例如 WebSocket 连接或分析数据的行为。
总结
在本文中，我们学习了 Redux 基础知识，并详细探讨了 Redux 中间件派发的异步 Action。 我们提供了一个示例来说明如何使用 Redux Thunk middleware 处理异步操作。 我们在最后总结了 Redux 中间件派发异步 Action 的指导意义，这些内容对于在开发过程中进行更高效的错误处理和性能优化非常有用。 如果您想深入了解 Redux 还可以继续阅读 Redux 官方文档。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/6652a7a6d3423812e471fd18