在开发现代 Web 应用程序时，模态框是一个常见的 UI 元素。它们是用来展示更多的信息或者在用户执行某些动作时提供选项的。Redux 是一个流行的状态管理库，但在处理多个模态框之间的交互时，可能会遇到一些挑战。在本文中，我们将重新审视 Redux 的工作原理，并提供一些示例代码，以说明如何在 Redux 中处理模态框之间的交互。
Redux 工作原理
Redux 是一个用于 JavaScript 应用程序的状态管理库。它提供了一个单一的存储位置，用于存储应用程序中的所有状态。Redux 的核心概念是 Store，它是一个 JavaScript 对象，用于存储应用程序中的所有状态。这是一个不可变的状态，也就是说，你不能直接更改它，必须通过 dispatching action 来更改它。
当一个 action 被 dispatching 时，Redux 将使用当前的状态和 action 来计算新的状态。这个过程是纯函数，就是说，它只依赖于输入，不会更改任何状态。当新状态被计算出来后，Redux 将会触发一个 'change' 事件，通知应用程序更新用户界面。
Redux 的工作原理可以用下图表示。
处理模态框之间的交互
在 Redux 中，我们面临的问题是如何处理多个模态框之间的交互。通常，我们需要在一个模态框中显示另一个模态框，并在其中进行选择。例如，在一个购物车应用程序中，当用户点击结账按钮时，你可能需要显示一个确认对话框，询问用户是否确认结账，然后显示一个付款对话框，让用户选择他们的付款方式。
在 Redux 中处理这种情况的一种通用方法是使用 modal state。modal state 是一个简单的数组，其中包含所有当前打开的模态框的 ID。当一个模态框被打开时，它的 ID 将被添加到 modal state 中。当它被关闭时，它的 ID 将从 modal state 中删除。
下面是一个示例模态框组件。
-- -------------------- ---- ------- ------ ----- ---- -------- ------ - ------- - ---- -------------- ----- ----- ------- --------------- - -------- - ----- - --- ------ --------- -------- ------ - - ----------- -- --------- ------ ----- ------ - ---- ------------------ ---- -------------------------- ---- ------------------------- ---- ------------------------- ----- ------- ------- ----------------------- --------- ------- -- ------- --------- ------ ---- ------------------------ -------- ------- ------ ---- ------------------------- --------- ------- -------- ------ -- - - ------ ------- ---------- ------ -- - -- -- -- -- ------- ------------------- -----------展开代码
在上面的代码中，我们首先在 Redux 存储中检查当前模态框是否打开，然后根据 isOpen 属性决定是否渲染模态框。我们还在 onClose 函数中 dispatch 了一个 CLOSE_MODAL action。
下面是显式一个模态框的代码。
-- -------------------- ---- ------- ------ ----- ---- -------- ------ - ------- - ---- -------------- ------ - ---------- ---------- - ---- ------------ ------ ----- ---- ---------- ----- --- ------- --------------- - -------- - ----- - ------------ ------------- ------ - - ----------- ------ - ----- ------- --------- ----------- ------ -------------- ------ ------------------ -------------- ------ --------- ------------ -- ------- -- -- ------- ---------- -------- - ------ -- ---- -------------------------- - ------ -- - - ------ ------- ---------- ------ -- -- -- ------- -------------------------------- --- - ------------ -- -- --------------------------- ------------- -- -- --------------------------- --------展开代码
在上面的代码中，我们有一个 modal state 数组，它包含所有当前打开的模态框的 ID。当用户点击 Open Modal 按钮时，我们 dispatch 了一个 OPEN_MODAL action，它会将模态框的 ID 添加到 modal state 中。Modal 组件的 ID 是静态的，所以我们将其命名为 'example-modal'。当用户点击模态框上的关闭按钮时，我们 dispatch 了一个 CLOSE_MODAL action，它会将模态框的 ID 从 modal state 中删除。
指导意义
使用 Redux 处理模态框之间的交互有一些好处。首先，它遵循了 Redux 的单一数据源原则，这使得它易于调试和测试。其次，它使我们能够跟踪所有模态框的状态，而不是只跟踪一个。最后，它使我们得以使用 Redux 开发常规组件，因为我们可以将模态框视为常规组件，并通过 dispatching action 进行交互。
在你的应用程序中，当你需要使用多个模态框时，Redux 提供了一个通用的解决方案，即 modal state，用于管理它们之间的交互。通过 Redux，你可以比较轻松地实现复杂的模态框交互，并确保它们的状态在整个应用程序中保持一致。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67bdf055a231b2b7ed0db551
