什么是 redux-promise？
redux-promise 是一个 Redux 中间件，可以让你在 Redux 应用中使用 Promise，来处理异步操作。
通常情况下，Redux 使用纯函数管理状态。然而在现实生活中，我们经常需要从服务器加载数据、处理异步操作和更新状态。 redux-promise 允许您发出异步请求，并在异步请求完成后自动分发 Redux 动作。
如何使用 redux-promise？
- 安装
redux-promise
npm install redux-promise
- 建立 Redux Store
-- -------------------- ---- ------- ------ - ------------ --------------- - ---- -------- ------ ----------------- ---- ---------------- ------ ----------- ---- ------------- ----- ----- - ------------ ------------ ---------------------------------- -- ------ ------- ------展开代码
在这里，我们使用 applyMiddleware() 来将 redux-promise 封装成一个中间件并与 Redux Store 进行绑定。
- 在 Redux Action 中使用
redux-promise
export const fetchUser = (id) => ({ type: 'FETCH_USER', payload: axios.get(`/users/${id}`) });
在这个例子中，我们使用 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
