0

I have a task - to implement notifications/alerts on react+flux. Imagine the next situation user clicks on the button. After that I'm firing an action - for example "CALCULATE_ACTION" then I catch it in the MainStore. While processing this action in the MainStore I need to show the notification for user. Let's imagine I'm calculating something in the MainStore. Before the calculation I need to show notification "calculation has started". And after the calculation show "calculation has finished". I have a NotificationComponent which takes the notification text from the NotificationStore. So to show the notification I can trigger the "SHOW_NOTIFICATION_ACTION" and pass the text of the notification to this action, so the NotificationStore will catch it and set it to its state and NotificationComponent will be rerendered and notification will appear.

The problem is that I can't fire an action while other is in process. So if I've already fired "CALCULATE_ACTION" I can't fire "SHOW_NOTIFICATION_ACTION". Of course I can catch the CALCULATE_ACTION in the NotificationStore. But then I will be able to show only one notification - If I'll wait for the MainStore then notification will be after the calculations in the MainStore, otherwise - before. And one more question- what if I need to show notification in the middle of the calculation?

My task is a bit abstract and I have more realistic one, but a lot of context should be explained so I've simplified the task to this example.

Does anybody has any ideas?

Any help would be highly appreciated!

2rist
  • 1

1 Answers1

0

In a typical react-flux setup, your components listen to changes in your stores.
Your component fires an action, your stores update, and your stores emit a change. (Stores should not fire actions)

In your (abstract) case, you could set it up as follows (with 1 action resulting in 2 store changes and 2 updates):

  • Front-end component listens to changes from BOTH NotificationStore as well as MainStore.
  • This component fires a CALCULATE_ACTION. NotificationStore listens to CALCULATE_ACTION. It immediately emits a change. (without waiting for MainStore).
  • Front-end component receives this change event, and it retrieves some active_state from NotificationStore (which in turn should probably read from MainStore to determine active_state). You can have your component show this calculation busy' message.
  • Meanwhile, MainStore also received the CALCULATE_ACTION. It starts the calculation, and as soon as it is done, have it emit a change. Your component listens to this change also, and will again retrieve the active_state from the NotificationStore. Which is now abviously 'done' or something similar.
wintvelt
  • 13,855
  • 3
  • 38
  • 43