Redux-promise-resolver 是一个 Redux 中间件，帮助我们更有效的处理异步 action 请求, 使之成为同步请求。
安装
在使用之前需要安装 redux-promise-resolver。
使用 npm 安装：
npm install redux-promise-resolver --save
或者使用 yarn 安装:
yarn add redux-promise-resolver
使用
使用 applyMiddleware 将 redux-promise-resolver 注入到你的 store 中，相信你已经知道 Redux 的使用过程。
import { createStore, applyMiddleware } from 'redux';
import promiseResolver from 'redux-promise-resolver';
import rootReducer from './reducers';
const store = createStore(
rootReducer,
applyMiddleware(promiseResolver),
);示例
接下来让我们来看一下使用 redux-promise-resolver 的完整示例。
现在我们有一个异步的 action，就是通过 Ajax 请求 API 获取表单数据。 我们希望先发起请求，等请求结束之后再弹出对话框提示，而不是在请求过程中就提示用户。
-- -------------------- ---- -------
------ ----- ---- -------
----- ------------- - -- -- -
------ --------------------------
--------- -- --
----- --------------------
-------- ---------
---
-
----- ------------ - -- -- --
----- ----------------
--首先我们可以将 fetchFormData 与 showDialogue 组合成一个顺序的函数，之后传递给我们的异步 action。
const fetchAndShowData = () => dispatch => {
dispatch(fetchFormData())
.then(() => dispatch(showDialogue()))
}使用原始的 redux-thunk 中间件的话，你就可以使用 fetchAndShowData 这个函数作为 action。但是我们想让这个函数看起来更清晰，因此，我们更希望这个函数返回一个纯 action，然后通过 redux-promise-resolver 来将这个异步 action 转变成我们想要的同步 action。
-- -------------------- ---- -------
----- ---------------- - -- -- --
----- ----------------------
-------- -
-------- -------- -- -
-------------------------
-------- -- -------------------------
--
-
--现在，你就可以使用 fetchAndShowData 作为同步 action 来处理了。
store.dispatch(fetchAndShowData())
当然，这个例子只是简单的，而且不一定非要引入 redux-promise-resolver 来处理。但是当你需要处理更多的异步请求的时候，使用 redux-promise-resolver 就可以使代码更具有可读性和可扩展性。
结论
Redux-promise-resolver 已经改变了我们处理 Redux 异步操作的方式，使我们能更容易地将异步请求转化成同步请求，并用简单的方式获取我们需要的数据或状态。
通过本文的介绍，相信您对于 redux-promise-resolver 的使用方法有了更加深入的理解。希望这篇文章对你有所帮助，谢谢阅读。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6006700fe361a36e0bce8d2f