Modals and Notifications are components that are appended to the body. So they work little different than normal components. In my App, I can think of two ways of implementing them and I am not sure which one is better.
- No stores
In this approach, I create a NotificationHelper class which has a create method. Inside that, I create a new container node, append it to the body and then call React.render(, container);
So any component can call NotificationHelper.create() and it will create a notification. Notification component that manages it's lifecycle and closes when the timer expires or somebody clicks on the close button.
The problem is often times, I need to show notification on the page in response to XHR response (success or failure), so in my actionCreator, I will have code like this
APIManager.post(url, postData).then(function(response) {
NotificationHelper.create(<SuccessNotification />)
});
I don't know if it's correct to call something like this from action creator that renders a new component.
- With stores
Another approach is to create a NotificationStore and on emitChange render the notification component. The code will look something like this
In my App.js, the code will be
<body>
<Header />
<Fooder />
<NotificationContainer />
</body>
And then in NotificationContainer, I will do something like
onChange: function() {
this.setState({customNotification: NotificationStore.get()});
},
render: function() {
<Notification>
{this.state.customNotification}
</Notification>
}
And finally, the action creator will look something like
Dispatcher.dispatch({
actionType: 'notification',
component: <MyComponent/>
});
The problem with this approach is the additional overhead of stores. Store is not doing any meaningful thing here, it's only there just to follow the flux. From action creator, we are passing data to the store, and the component is again taking the same data from the store and rendering it. So we finish the flux cycle without really getting anything out of it.
Also, I now need to initialize NotificationContainer at the start of my app, even though I don't have any notifications at this point.