在开发前端应用程序时，多数时候需要解决弹出对话框等模态窗口的问题。为了更高效的管理 React 应用程序中的各种模态窗口，可以使用 redux-promising-modals这个 npm 包。在本文中，我们将深入探讨如何使用 redux-promising-modals 包。
安装 npm 包
首先，我们需要通过 npm 安装 redux-promising-modals：
npm install redux-promising-modals
这将在您的项目中安装 Redux，React，和其他必需的依赖项。
在我们开始使用 redux-promising-modals 之前，先来了解其中一些基本概念。
Redux 与 Modal Redux 之间的关系
Redux 和 Modal Redux 之间的关系虽然紧密，但是 Modal Redux 并没有像 Redux 那样成为一个独立的库。
Modal Redux 在 Redux 库的基础之上提供了一组 action 和 reducer，使得开发人员可以使用 Redux 管理模态窗口组件的状态。
使用过程中，Modals 的状态将与全局 Redux store 同步。这意味着，弹出窗口的状态将与您的应用的状态共享。这为您的应用程序提供了更一致和可预测的状态管理。
应用 redux-promising-modals
要使用 redux-promising-modals，首先需要在您的 Redux 应用程序中导入对应的 reducer，并将其传递给您的 store：
import { combineReducers, createStore } from 'redux';
import { modalsReducer } from 'redux-promising-modals';
const rootReducer = combineReducers({
modals: modalsReducer
});
const store = createStore(rootReducer);创建 Modal 组件
我们可以创建一个自定义的 Modal 组件，并将其传递给 redux-promising-modals 内置的 openModal() action：
-- -------------------- ---- -------
------ - --------- - ---- -------------------------
----- ------- ------- --------------- -
--------- -
---------------------
-
-------- -
----- - ------- - - -----------
------ -
-----
------ ----------
------- --------------------------------
------
--
-
-
-- ------ -----
---------------
-----------
---------- -------
--
--上面的代码将会打开一个 <MyModal> 组件，从而展示一个简单的提示对话框。
当用户关闭模态窗口时，dismiss() 方法将会被调用以关闭模态窗口。
自定义 Promising Modals
Promising Modals 是一组允许您自定义模态窗口行为的工具。这些方法使您可以在模态窗口关闭前获取或修改模态窗口状态的一些数据。
onOpen（state：Object，dispatch：Function）
-- -------------------- ---- -------
------ - --------- - ---- -------------------------
----- ------- ------- --------------- -
----- ------------- --------- -
-- --------------
----- --------------------
----- --------------------------------
-
--------- -
---------------------
-
-------- -
----- - ------- - - -----------
------ -
-----
------ ----------
------- --------------------------------
------
--
-
-
-- ------ -----
---------------
-----------
---------- --------
------- --------------
--
--onComplete（state：Object，dispatch：Function）：Promise
-- -------------------- ---- -------
------ - --------- - ---- -------------------------
----- ------- ------- --------------- -
----- ----------------- --------- -
-- ---
------ ------------------------------
-
--------- -
---------------------
-
-------- -
----- - ------- - - -----------
------ -
-----
------ ----------
------- --------------------------------
------
--
-
-
-- ------ -----
----- --------- - ---------------
-----------
---------- --------
----------- ------------------
--
--
----------------------------- -- -
-- ----
-- ----- -- -
-- ----
---结论
Redux-promising-modals 包为 React 应用程序中的模态窗口提供了一些可靠的工具，使得在管理弹出窗口时更加轻松和高效。在本文中，我们深入探讨了 redux-promising-modals 的基本概念和操作，以及如何使用它创建可定制的模态窗口组件。通过摸索和实践，您可以将 redux-promising-modals 作为一个有用的工具，将其运用为您的 React 应用程序中的一个关键组成部分。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6006700fe361a36e0bce8d50