在 Redux 应用中，我们常常需要处理异步操作，例如发送请求、获取响应等。在 Redux 中，PromiseMiddleware 可以使我们更方便地处理这些异步操作。本文将介绍 Redux 中的 PromiseMiddleware 并详细讲解其使用方法和技巧。
什么是 PromiseMiddleware
PromiseMiddleware 是 Redux 中的一个中间件，它可以为 Redux 应用提供处理异步操作的能力。它的主要作用是将 Action 转换为 Promise 以处理异步操作，并利用 Redux 的特性来处理异步操作所带来的状态变化。
PromiseMiddleware 的基本用法
使用 PromiseMiddleware 很简单，只需要将其作为 Redux createStore 方法的第二个参数即可：
import { createStore, applyMiddleware } from 'redux';
import promiseMiddleware from 'redux-promise-middleware';
import rootReducer from './reducers';
const store = createStore(
rootReducer,
applyMiddleware(promiseMiddleware),
);接下来，我们就可以在 Action 中使用 Promise 了。例如，假设我们有一个获取用户信息的 Action：
export const getUserInfo = userId => ({
type: 'GET_USER_INFO',
payload: fetch(`https://example.com/api/user/${userId}`).then(res => res.json()),
});在 PromiseMiddleware 的帮助下，我们可以很方便地将这个异步操作封装为 Promise，并在获取到响应时以 payload 参数的形式传递给 Action。
PromiseMiddleware 的高级用法
PromiseMiddleware 不仅仅只是帮助我们处理异步操作，它还有许多高级用法。下面我们就来介绍一些 PromiseMiddleware 的技巧。
1. withExtraArgument
withExtraArgument 是 PromiseMiddleware 提供的一个方法，它可以让我们将额外的参数传递给每个 Promise：
-- -------------------- ---- -------
------ - ------------ --------------- - ---- --------
------ ------------------ - ----------------- - ---- ---------------------------
------ ----------- ---- -------------
----- ------- - -
-- ---
--
----- ----- - ------------
------------
----------------
------------------
---------------------------
--
--
-- ---
------ ----- ----------- - ------ -- --
----- ----------------
-------- ------------------------
---在上面的例子中，我们将 someApi 对象作为额外参数传递给了 withExtraArgument。在后面的 Action 中，我们可以通过异步操作函数的第二个参数获取这个额外参数，并在异步操作中使用它。
2. 定制 Promise 类型
在默认情况下，PromiseMiddleware 返回的 Action 的类型为原始的 Action 类型后加上 _PENDING、_FULFILLED 和 _REJECTED，分别表示异步操作进行中、已完成和已拒绝。如果我们想要定制这些后缀，可以通过修改 PromiseMiddleware 的配置来实现：
-- -------------------- ---- -------
------ - ------------ --------------- - ---- --------
------ ----------------- ---- ---------------------------
------ ----------- ---- -------------
----- ----- - ------------
------------
----------------
-------------------
-------------------- ----------- ---------- -----------
---
--
--
-- ---
------ ----- ----------- - ------ -- --
----- ----------------
-------- -
-------- ------------------------
----- -------
--
---在上面的例子中，我们将 PromiseMiddleware 的配置修改为将 Action 类型后缀分别改为 LOADING、SUCCESS 和 FAILURE。我们还在 Action 的 payload 中增加了一个 data 属性，用于存放我们传递给异步操作的参数。
3. 获取异步操作的状态
在使用 PromiseMiddleware 时，我们不仅可以获取异步操作的结果，还可以获取它的状态。例如，我们可以通过添加 _PENDING、_FULFILLED 或 _REJECTED 后缀的类型来获取异步操作的状态：
-- -------------------- ---- -------
------ ----- ----------- - ------ -- --
----- ----------------
-------- ------------------------
----- -
------ -----
-------------------- ----------- ---------- -----------
--
---
-- ---
----- ----- - -----------------
-- --------------- -
-- ---------
- ---- -- --------------- -
-- ---------
- ---- -- --------------- -
-- -------
-在上面的例子中，我们在 Action 的 meta 中添加了 thunk: true 和 promiseTypeSuffixes 属性，分别表示这是一个异步 Action 和异步操作的状态后缀。在后面的代码中，我们通过查询 store 中的状态，以判断异步操作的状态。
结语
本文介绍了 Redux 中的 PromiseMiddleware，并详细讲解了其使用方法和技巧。当你需要处理异步操作时，PromiseMiddleware 可以为你提供很大的帮助。如果你想更深入地了解 Redux，强烈建议你阅读 Redux 官方文档并参阅 Redux 应用开发实践。
Source: FunTeaLearn,Please indicate the source for reprints https://funteas.com/post/67c1450a314edc268491897e