在前端开发领域中，Redux 是一种非常流行的状态管理库。Redux 通过中心化的 store 来管理应用程序的状态，以便组件可以更快地访问和更新状态。
然而，由于异步操作的广泛使用，Redux 需要处理异步操作的情况，例如从数据库或服务器获取数据或进行某些操作。
在本篇文章中，我们将介绍如何在 Redux 中使用 Promise 对象处理异步操作。
什么是 Promise？
Promise 是 ECMAScript 6 引入的新对象，它代表一个尚未完成的操作。Promise 可以是以下三种状态之一：
- Pending：尚未完成。
- Fulfilled：已经完成，并返回了结果。
- Rejected：已经失败，并返回错误信息。
在实践中，Promise 通常用于异步操作，它可以让您处理异步操作时更清晰和更流畅。例如当我们使用 axios，fetch 等库发出网络请求时，通常会使用 Promise 来处理它们的结果。
Redux 中的异步操作？
在 Redux 中，我们执行异步操作的典型方法是使用 middleware。 Redux middleware 是函数，它从 store 接收 action，并在发送 action 到 reducer 之前处理它们。
Redux 框架提供了 Thunk Middleware 来处理异步操作。Thunk Middleware 允许 action creators 返回函数而不是对象。函数具有 dispatch 和 getState 两个参数，因此我们可以在函数中执行异步操作，并等待返回结果再 dispatch。
但是，Thunk Middleware 并没有提供任何处理 Promise 的内置机制。因此，我们需要编写自己的 middleware 来处理 Promise。
利用 Promise 在 Redux 中进行异步操作
下面是在 Redux 中利用 Promise 进行异步操作的步骤：
- 创建一个新的 middleware，使其能够处理 Promise 类型的 action。
- 在 middleware 中，我们可以使用 Promise 来等待异步操作的结果。
- 整个异步操作结束后，我们可以根据操作的成功或失败状态 dispatch 新的 action。
-- -------------------- ---- -------
-- ---- ------
------ ----- --------- - ---- -- -
------ ---------- -- -
---------- ----- -------------------- ---
------ ---------------------------------------------------------
---------------- -- ----------------
------------ -- -
---------- ----- --------------------- -------- ---- ---
------ -----
--
-------------- -- -
---------- ----- --------------------- -------- ----- ---
----- ------
---
--
--
-- ------- ----------
----- ----------------- - ------- -- ------ -- -------- -- -
-- ------- ----------- --- ----------- -
------ ---------------------------------------------
-
------ -------------
--
-- ------- ------- ----------
-- ----- --------------- - -- -------- -- -- ------ -- -------- -- -
-- -- ------- ------ --- ----------- -
-- ------ ----------------
-- - ---- -- ------- ----------- --- ----------- -
-- ------ --------------------------------------
-- -
-- ------ ------------
-- -
-- -- -----
----- ----- - --------------------- ------------------------------------在上面的示例代码中，我们首先定义了一个异步操作的 action creator（fetchUser）。在创建新的 middleware（promiseMiddleware）时，我们检查 action 是否是 Promise 类型。如果是，我们使用 Promise 的 resolve 函数等待结果并将其 dispatch 到 store，否则交给下一个 middleware 处理。
最后，我们在 createStore 的 applyMiddleware 函数中添加这个 promiseMiddleware，在应用程序中使用即可。
总结
总的来说，Promise 在 Redux 中的使用可以使我们的代码更简单、可读性更高。我们可以通过编写自己的 middleware 来处理 Promise 的返回值，并在 Action 完成时根据操作状态 dispatch 新的 action。让我们在异步操作中更加便捷地使用 Redux！
提示：以上示例代码可在 CodePen 上访问 https://codepen.io/shanyue/full/RwKYPma。
参考
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64c479f183d39b4881801665