简介
redux-promise-middleware-es3 是一个用于处理 Redux 应用中异步操作的中间件，它可以自动识别 Redux action 中的 Promise 对象并在 Promise 结束后触发相应的 action。本文将介绍该包的使用方法，以及如何在 Redux 应用中使用它。
安装
在使用 redux-promise-middleware-es3 之前，需要先在项目中安装该包。可以使用 npm 或 yarn 进行安装。
npm install --save redux-promise-middleware-es3
或者
yarn add redux-promise-middleware-es3
使用方法
redux-promise-middleware-es3 提供了一个名为 promiseMiddleware 的函数，该函数返回一个 Redux 中间件。在创建 Redux store 时，需要将该中间件传递给 applyMiddleware 函数。
import { createStore, applyMiddleware } from 'redux';
import promiseMiddleware from 'redux-promise-middleware-es3';
import rootReducer from './reducers';
const store = createStore(
rootReducer,
applyMiddleware(promiseMiddleware)
);这样就把 redux-promise-middleware-es3 加入到了 Redux store 的 middleware 中，从而可以在 Redux 的 action 中使用 Promise。
示例
以下是一个示例，该示例展示了如何在 Redux 中使用 Promise，并使用 redux-promise-middleware-es3 处理异步操作。
-- -------------------- ---- -------
------ ----- ---- --------
------ ----- ---------- - -------------
------ ----- ------------------ - ---------------------
------ ----- -------------------- - -----------------------
------ ----- ------------------- - ----------------------
------ -------- ----------- -
------ -
----- -----------
-------- ----------------------
--
-在上面的示例中，fetchData action 创建函数返回了一个 Promise 对象。在触发该 action 时，redux-promise-middleware-es3 会自动创建以下三个 action：
FETCH_DATA_PENDING：异步请求开始时触发。FETCH_DATA_FULFILLED：异步请求成功时触发。FETCH_DATA_REJECTED：异步请求失败时触发。
可以在 Redux reducer 中使用这些 action 处理相应的数据。
-- -------------------- ---- -------
------ -
-------------------
---------------------
-------------------
- ---- -------------
----- ------------ - -
----- ---
---------- ------
------ ----
--
------ ------- -------- ----------------- - ------------- ------- -
------ ------------- -
---- -------------------
------ - --------- ---------- ----- ------ ---- --
---- ---------------------
------ - --------- ---------- ------ ----- ------------------- --
---- --------------------
------ - --------- ---------- ------ ------ ---------------------- --
--------
------ ------
-
-使用以上的 action 创建函数和 reducer，可以方便地管理 Redux 应用中的异步操作。
总结
redux-promise-middleware-es3 可以帮助我们在 Redux 应用中处理异步操作，使得代码更加简洁和易于维护。在使用该包时需要将其加入到 applyMiddleware 中，然后在 action 中返回 Promise 对象即可。通过示例代码的学习，相信读者已经掌握了 redux-promise-middleware-es3 的使用方法。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6006700ee361a36e0bce8d23