使用Flux和React显示同步操作之前和之后的通知

Question

我有一项任务 - 在react + flux上实施通知/警报。想象一下用户点击按钮的下一个情况。之后，我正在触发一个动作 - 例如“CALCULATE_ACTION”然后我在MainStore中捕获它。在MainStore中处理此操作时，我需要显示用户的通知。让我们想象一下我在MainStore中计算一些东西。在计算之前，我需要显示通知“计算已经开始”。并在计算后显示“计算已完成”。我有一个NotificationComponent，它从NotificationStore获取通知文本。因此，要显示通知，我可以触发“SHOW_NOTIFICATION_ACTION”并将通知文本传递给此操作，因此NotificationStore将捕获它并将其设置为其状态，NotificationComponent将被重新呈现并显示通知。

问题在于，当其他正在进行时，我无法触发操作。所以，如果我已经解雇了“CALCULATE_ACTION”，我就无法触发“SHOW_NOTIFICATION_ACTION”。当然，我可以在NotificationStore中捕获CALCULATE_ACTION。但后来我只能显示一个通知 - 如果我要等待MainStore，那么通知将在MainStore中进行计算，否则 - 之前。 还有一个问题 - 如果我需要在计算过程中显示通知怎么办？

我的任务有点抽象，我有一个更现实的，但是应该解释很多上下文，所以我把任务简化为这个例子。

有人有任何想法吗？

任何帮助都将受到高度赞赏！

Answer 1

在典型的反应通量设置中，您的组件会聆听商店中的变化 您的组件会触发操作，您的商店会更新，并且您的商店会发出更改。 （商店不应该采取行动）

在您的（摘要）案例中，您可以将其设置如下（1个操作导致2个商店更改和2个更新）：

• 前端组件侦听来自BOTH NotificationStore的更改 以及MainStore。
• 此组件触发CALCULATE_ACTION。 NotificationStore侦听CALCULATE_ACTION。它会立即发出一个 更改。 （无需等待MainStore）。
• 前端组件接收此更改事件，并检索一些active_state 来自NotificationStore（反过来应该从中读取） MainStore确定active_state）。您可以让您的组件显示此计算繁忙的消息。
• 同时，MainStore也收到了 CALCULATE_ACTION。它开始计算，并且一旦开始计算 完成后，让它发出变化。您的组件会侦听此更改 另外，并将再次从中检索active_state NotificationStore。现在这是“完成”或其他什么 类似。