在前端开发中，Redux 已成为状态管理的标配，而且随着 React Hooks 的出现，Redux Hooks 的使用也变得越来越普遍。但是，当你在项目中需要处理异步操作时，手写一大坨中间件或者 redux-thunk 可能会令你感到挫败。这时，redux-universal-promise 这个 npm 包就可以帮助你解决这个问题。
redux-universal-promise 是什么？
redux-universal-promise 是一个帮助你处理 Redux 异步操作的 npm 包。它提供了一个通用的统一方法 actionPromise，你只需要传递一个 Promise 对象即可。其中的中间件会根据 Promise 的状态分别触发请求、成功和失败的 action，让你的代码更加简洁和易懂。
安装 redux-universal-promise
要在项目中使用 redux-universal-promise，你需要先安装它：
npm install redux-universal-promise // 或者 yarn add redux-universal-promise
使用 redux-universal-promise
在你的 Redux 应用中使用 redux-universal-promise 很简单。你只需要按照以下步骤编写代码即可：
1. 导入相关的库
import { createStore, applyMiddleware } from 'redux';
import promise from 'redux-universal-promise';
// 导入其他的 Redux 相关库2. 定义 action 构造函数
-- -------------------- ---- -------
----- ------------ - ---------------
----- ------------ - ---------------
----- ------------------ - ---------------------
-------- ------------- -
------ -
----- -------------
--
-
-------- ----------------- -
------ -
----- -------------
-----
--
-
-------- ---------------------- -
------ -
----- -------------------
------
--
-3. 定义 reducer
-- -------------------- ---- -------
----- ------------ - -
----------- ------
----- -----
------ -----
--
-------- ------------- - ------------- ------- -
------ ------------- -
---- -------------
------ -
---------
----------- -----
--
---- -------------
------ -
---------
----------- ------
----- ------------
------ -----
--
---- -------------------
------ -
---------
----------- ------
----- -----
------ -------------
--
--------
------ ------
-
-4. 创建 store
const store = createStore( reducer, applyMiddleware(promise) // 添加其它的中间件 );
5. 在组件中 dispatch action
-- -------------------- ---- -------
------ ----- ---- --------
------ - ------- - ---- --------------
----- --- ------- --------------- -
------------------- -
-- ------ ------------------------------
---------------------
-------- -----------------
----- -
-------- ------- --------
--
---
---------- ---------------
---------- ---------------
---------- ---------------------
---
-
-------- -
-- ----------------------- -
------ ----------------------
- ---- -- ------------------ -
------ --------------------------------------
- ---- -- ----------------- -
------ -------------------------------------
- ---- -
------ -----
-
-
-
-------- ---------------------- -
------ -
----------- -----------------
----- -----------
------ ------------
--
-
------ ------- ------------------------------在这里，我们通过 dispatch(action) 的方式传递了一个对象作为参数。这个对象中包含了三个属性：
- promise：要执行的 Promise 对象
- onRequest：触发请求的 action 的 type
- onSuccess：触发成功的 action 的 type
- onFailure：触发失败的 action 的 type
上面这段代码中，我们传递了一个使用 Promise.resolve 创建的 Promise 对象。在实际项目中，你需要使用你的真正的异步请求替代它。
6. 处理请求、成功和失败 action
最后，redux-universal-promise 会自动派发三个 action：
- 请求 action：当 promise 被返回但在解决之前，actionOfType 请求 actionType 将被派发
- 成功 action：当请求成功时，actionOfType 成功 actionType 将被派发，并且 promise 的解决值将是这个 action 的 payload
- 失败 action：当解决promise失败时，actionOfType failureActionType 将被派发，并且promise的拒绝值将是这个action的error
在上述代码中，我们分别定义了上述三种 action 的构造函数，在 reducer 中分别处理对应的 actionType。
总结
redux-universal-promise 是一个方便简洁的工具，可以使 Redux 应用中异步操作的处理变得更加容易和优美。使用它可以简化代码，提高开发效率。
更多文档和示例代码可以在 redux-universal-promise 的 GitHub 仓库中找到：https://github.com/LesterGallagher/redux-universal-promise.
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005558a81e8991b448d2b12