redux-sync-promise 是一个能够在 Redux 应用中帮助我们管理异步 action 的 npm 包。它提供了一种简单的方式，使得我们可以在 action 中返回一个 Promise，然后等待该 Promise 成功后再更新 state。本文主要介绍 redux-sync-promise 的基本使用方法及其实现原理。
安装
redux-sync-promise 可以通过 npm 安装：
npm install redux-sync-promise
或者通过 yarn 安装：
yarn add redux-sync-promise
基本使用
首先，在 Redux 的 createStore 中引入 redux-sync-promise：
import { createStore } from 'redux';
import syncPromiseMiddleware from 'redux-sync-promise';
const store = createStore(
reducer,
applyMiddleware(syncPromiseMiddleware),
);然后，在生成 action 的函数中返回一个 Promise，当该 Promise 完成时，我们使用 redux-sync-promise 的标准 action 来保存结果：
export const fetchData = url => async (dispatch) => {
const result = await fetch(url);
const data = await result.json();
dispatch({
type: 'FETCH_DATA',
promise: Promise.resolve(data),
});
};上述代码中，我们使用 async/await 来请求数据，等待结果后，我们将结果封装在一个 Promise 中，并用该 Promise 对象创建一个标准 action 返回。这个 action 对象中的 promise 属性是 redux-sync-promise 定义的一个关键字，用于指定 action 执行完后需要执行的 Promise 对象。
最后，我们需要在 reducer 中根据这个 action 更新我们的 state：
-- -------------------- ---- -------
----- ------- - ------- ------- -- -
------ ------------- -
---- -------------
------ -
---------
----- ---------------
--
--------
------ ------
-
--上述代码中，我们将 action.promise 作为数据存储到 state 中。由于 action 已经由 redux-sync-promise 处理，action.promise 返回的实际上是完成数据的 Promise 对象。
实现原理
redux-sync-promise 的本质是一个 middleware，所以它被放在 Redux createStore 函数中的 applyMiddleware 方法中。通过这个 middleware，我们可以使用 action.promise 这个关键字来指定 action 后需要执行的 Promise 对象。
当我们 dispatch 一个 action 时，redux-sync-promise 会判断该 action 中是否包含关键字 promise。如果包含，它会等待该 Promise 对象执行完成，然后再将结果保存到 state 中。
同时，redux-sync-promise 会创建一个新的代理 action，将原始的 action 中的 promise 属性移除。这个代理 action 的类型形式为 ${ACTION_TYPE}_COMPLETED，并将其返回给 reducer 进行处理。在 reducer 中，我们可以通过解析 action 类型后的后缀，判断当前 redux-sync-promise 是否返回了一个代理 action，然后再将 action.promise 中的结果存储到 state 中。
总结
redux-sync-promise 是一个非常有用且易于使用的 npm 包，它能够让我们更好地管理 Redux 中的异步 action。本文介绍了 redux-sync-promise 的基本使用方法及其实现原理，希望对大家有所帮助。附上完整示例代码：
-- -------------------- ---- -------
------ - ------------ --------------- - ---- --------
------ --------------------- ---- ---------------------
----- ----- - ------------
--------
---------------------------------------
--
------ ----- --------- - --- -- ----- ---------- -- -
----- ------ - ----- -----------
----- ---- - ----- --------------
----------
----- -------------
-------- ----------------------
---
--
----- ------- - ------- ------- -- -
----- ---- - --------------------------
------ ------ -
---- -------------
------ -
---------
----- ---------------
--
--------
------ ------
-
--来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6006700de361a36e0bce8ca1