Flux：处理模态窗口

Posted 2023-02-22

【中文标题】Flux：处理模态窗口

【英文标题】：Flux: Handling Modal windows

【发布时间】：2014-11-16 02:16:47

【问题描述】：

在使用 Flux 实现时应该如何显示模态窗口。我可以让组件更新其状态以显示模式并在完成后关闭它。模态中的保存将触发操作并更新商店。但是模态不会需要关闭。然后我需要发出不同的事件或让商店存储模态的状态。

【参考方案1】：

对我来说，将模态的状态存储在商店中是非常好的。在保存事件时，只需使用布尔值来说明是否应显示模式。

您的商店不需要具有单一属性，它可以更复杂。就像有一个数组和一个布尔值。 当保存发生时，只需更新您的数组并放置一个布尔值open=false，您将在您的渲染方法中使用它来不再渲染模式。您不需要 2 个操作来执行此操作，一个操作可以更新您的商店模型 + 将布尔值更新为 false。 这里的复杂性是知道在商店里放什么。如何组织你的状态......随着时间的推移，这可能会变得相当复杂。到目前为止，我通过使用自治组件以及它们自己的商店（如小部件）获得了巨大的成功。 You can find more details here.

以更一般的方式，您可以将布局属性放在商店中。像光标或鼠标位置，打开的模态，鼠标是否在某个元素上......

【讨论】：

我正在使用类似的方法，即当前将状态存储在 Store 中。正如您所说，复杂性是知道在商店中放置什么。检查链接，如果您有示例应用程序会更感兴趣。

我同意这一点。我们正在做同样的事情，但我们有一个商店可以处理特定上下文中的所有模式。所以我们做 ModalActionCreators.openModal('CreatePostModal');