3

How should Modal window be shown while using the Flux implementation. I can have the Component update its state to display a modal and close it once done. A save in the modal would trigger a action and update the store. But the modal would not that it needs to be closed. I would then need to emit a different event or have the store store the state of the modal.

pra
  • 343
  • 1
  • 3
  • 16

1 Answers1

3

For me it is perfectly fine to store the state of the modal in the store. On save event, just use a boolean value to say whether or not the modal should be displayed.

Your store doesn't need to have a single attribute, it can be more complex. Like having an array and a boolean. When the save happens, just update your array and put a boolean open=false that you will use in your render method to not render the modal anymore. You don't need 2 actions to do that, one action can update your store model + update the boolean to false. The complexity here is to know what to put in stores. How to organise your state... This can become quite complex over time. Until now I have found great success by using autonomous components, with their own stores, like widgets. You can find more details here.

In a more general way, you can put layout properties in stores. Like cursor or mouse position, opened modals, whether mouse is over some element or not...

Community
  • 1
  • 1
Sebastien Lorber
  • 89,644
  • 67
  • 288
  • 419
  • 1
    I am using a similar approach i,e storing state in Store currently. As you said complexity is know what to put in Stores. Checked the link, would be more interested if you have a example app. – pra Sep 23 '14 at 09:11
  • I agree with this. We are doing the same thing but we have a store that handles all modals in a particular context. So we do ModalActionCreators.openModal('CreatePostModal'); – stueynet Mar 30 '16 at 12:44