redux-contract 是一个基于 Redux 的中间件，旨在简化应用程序中的异步操作。在本文中，我们将探讨如何使用 redux-contract，介绍其API，以及如何在应用程序中实现异步操作。
安装
使用npm或者yarn安装redux-contract。
npm install redux-contract
或
yarn add redux-contract
基本用法
redux-contract 通过为标准的 Redux 操作添加一些属性来简化异步行为的处理。在下面的示例中，我们将看到如何使用 redux-contract 处理异步行为。
-- -------------------- ---- -------
------ - ------------ --------------- - ---- --------
------ ------------------ ---- -----------------
-- --------
----- --------- - -- -- --
----- -------------
--------- -
-------- -- -- ------------------
-
---
-- ---------
----- ------- - ------ - --- ------- -- -
------ ------------- -
---- ---------------------
------ ---------------
---- -------------------
------ ------
--------
------ ------
-
--
-- -------
----- ----- - ------------
--------
-----------------------------------
--
-- --------
----------------------------在上面的代码中，fetchData() action包含了一个contract属性，它指定了一个promise函数，该函数负责发出网络请求。当promise函数解析时，redux-contract 将会自动触发 FETCH_DATA_SUCCESS action，并将请求的结果作为 payload 传递。如果该 promise 函数被拒绝，redux-contract 将会触发FETCH_DATA_ERROR，并将错误信息传递给 reducer。
这是一个非常简单的示例，可以轻松地扩展和定制，以满足你的应用程序的特定需求。
高级功能
除了上述基本用法，redux-contract还提供了更高级的功能。
在启动应用程序时分发大量action
如果需要在应用程序启动时执行大量action，那么想象一下一个包含多个异步行为的应用程序加载的开销是多么大。使用redux-contract，我们可以在启动时通过dispatching一个数组来处理所有异步行为。redux-contract 将在所有异步操作完成后返回一个 Promise，解决了这个问题。
-- -------------------- ---- -------
------ - ------------ --------------- - ---- --------
------ ------------------ ---- -----------------
-- --------
----- ------------ - -- -- --
----- -----------------
--------- -
-------- -- -- --------------------------------- ---------------------
-
---
-- ---------
----- ------- - ------ - --- ------- -- -
------ ------------- -
---- -------------------------
------ ---------- ------------------ -------------------
---- -----------------------
------ ------
--------
------ ------
-
--
-- -------
----- ----- - ------------
--------
-----------------------------------
--
-- --------
-------------------------------------- -- -
---------------- ---- ---- ---- -----------
---当我们dispatchfetchALLData() action时，redux-contract将处理我们传递的 Promise.all方法中的所有异步操作，并在所有操作完成后resolve Promise。
多个异步操作共享同一个 Promise
在 redux-contract 中，我们可以通过为多个 action 指定相同的 promise 函数来共享 Promise 实例，避免了不必要的多余请求。
-- -------------------- ---- -------
------ - ------------ --------------- - ---- --------
------ ------------------ ---- -----------------
----- ------- - -------------------
-- ---------
----- -------------- - -- -- --
----- -------------------
--------- -
-------
-
---
----- --------------- - -- -- --
----- --------------------
--------- -
-------
-
---
-- ---------
----- ------- - ------ - --- ------- -- -
------ ------------- -
---- ---------------------------
---- ----------------------------
------ ---------- ----------------
---- -------------------------
---- --------------------------
------ ------
--------
------ ------
-
--
----- ----- - ------------
--------
-----------------------------------
--
---------------------------------
----------------------------------在上面的代码中，fetchDataFirst() 和 fetchDataSecond() action 都使用相同的 promise 函数。在这种情况下，即使这两个 action 是用不同的方式触发的，它们都会共享相同的 Promise 实例，并且在第二次调用时不会重复请求。
总结
这篇文章介绍了如何使用 redux-contract 简化应用程序中的异步操作。我们展示了一些基本用法和一些高级功能，如在应用程序启动时处理异步操作和共享同一个 Promise 实例。
如果你想在应用程序中简化异步操作的处理并缩短代码长度，那么 redux-contract 可能是一个不错的选择。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60067007e361a36e0bce8a68