Best way to implement modals and notifications in React Flux Best way to implement modals and notifications in React Flux reactjs reactjs

Best way to implement modals and notifications in React Flux


I don't really see how your problems are problems. It does exactly what it's supposed to do, and if you need to build on it later, you can easily do so. Notifications and other no-true-component-owner features are one of the best reasons to use flux in my opinion (90% of the time I don't recommend flux).

With flux the notification action creator would be responsible for creating a remove notification action after a set period of time. You can also have an x button on the notification, which when clicked creates that action, and these go to the store which removes the item if it exists, and any/all views dependant on this store update. When I say any/all I mean that the notifications component may be hidden, or there may be an alternate way to view notifications on one page of the app, or there may be a simple counter with the number of notifications anywhere in the app.

Side note: don't pass around elements in a way that they could be rendered more than once. Pass {component: SuccessNotification, props: props} instead if you need to specify the component ahead of time.


I follow the answer of FakeRainBrigand.

Sorry the self promotion here but I created a Notification component that you can use with Flux. Here you can see a issue that shows a example of usage with Alt, but the principles are the same. You add the component to a top level element on your HTML and subscribe that component to a Notification store. On your notification action creator, you can add notification with some properties like: level, position, auto-dismissible, action, etc.

Here is the component demo.