什么是 redux-promise？
redux-promise 是一个 Redux 中间件，可以让你在 Redux 应用中使用 Promise，来处理异步操作。
通常情况下，Redux 使用纯函数管理状态。然而在现实生活中，我们经常需要从服务器加载数据、处理异步操作和更新状态。 redux-promise 允许您发出异步请求，并在异步请求完成后自动分发 Redux 动作。
如何使用 redux-promise？
- 安装
redux-promise
--- ------- -------------
- 建立 Redux Store
------ - ------------ --------------- - ---- -------- ------ ----------------- ---- ---------------- ------ ----------- ---- ------------- ----- ----- - ------------ ------------ ---------------------------------- -- ------ ------- ------
在这里，我们使用 applyMiddleware() 来将 redux-promise 封装成一个中间件并与 Redux Store 进行绑定。
- 在 Redux Action 中使用
redux-promise
------ ----- --------- - ---- -- -- ----- ------------- -------- ------------------------- ---
在这个例子中，我们使用 axios 库来发出异步请求。在异步请求完成之前，Promise 会一直处于 pending 状态。然后，redux-promise 会自动解析 payload 中的 promise 对象，获取它的结果，并将结果传递给 Redux Store 作为标准 JavaScript 对象。
- 处理异步状态
在你的 UI 组件中，可以使用 mapStateToProps() 函数来将 Redux Store 中的状态映射到组件的 props。
------ ----- ---- --------
------ - ------- - ---- --------------
----- ---- ------- --------------- -
-------- -
----- - ---- - - -----------
-- ------- -
------ ----------------------
-
------ -
-----
--------------------
-------------------
------
--
-
-
----- --------------- - ------- -- --
----- ----------
---
------ ------- -------------------------------在这个例子中，如果 state.user 为 undefined，则会显示 "Loading..."。在异步请求完成之后，state.user 将会包含 payload 的返回结果。
结论
redux-promise 为 Redux 应用程序提供了强大和灵活的异步处理功能。使用 redux-promise 可以轻松地处理需要异步操作的状态，而不必在应用程序中处理复杂的回调函数和 Promise 管理。
举一个例子，如果您正在构建一个电子商务应用程序，您可能会需要从服务器加载数据。redux-promise 可以让你轻松地处理这种情况，并将返回结果存储在 Redux Store 中。
在使用 redux-promise 时，请注意正确处理异步状态。您可以使用 mapStateToProps() 函数将状态映射到组件的 props 中，并在异步请求完成之前，显示适当的状态。
示例代码
-- --------
------ - ------------ --------------- - ---- --------
------ ----------------- ---- ----------------
------ ----------- ---- -------------
----- ----- - ------------
------------
----------------------------------
--
------ ------- ------
-- ----------
------ ----- --------- - ---- -- --
----- -------------
-------- -------------------------
---
-- -------
------ ----- ---- --------
------ - ------- - ---- --------------
----- ---- ------- --------------- -
-------- -
----- - ---- - - -----------
-- ------- -
------ ----------------------
-
------ -
-----
--------------------
-------------------
------
--
-
-
----- --------------- - ------- -- --
----- ----------
---
------ ------- -------------------------------来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/71918