ReactJS + Flux - How to implement toasts / notifications?

Question

I am trying to understand Flux and Reactjs.

Consider the following, very simple scenario:

You have a form with multiple inputs. When a user submits a form,

ActionCreator.publishAnnouncement(this.state.announcement); 

called inside my form component. Here's what the publishAnnouncement method looks like:

 var publishAnnouncement = function (announcement) { AnnouncementAPI.publishAnnouncement( announcement, successCallback, failureCallback ) }; 

AnnouncementAPI is just a wrapper when calling AJAX http POST. It requires two callbacks - from success and from failure.

And now: I need to show a notification / toast on the screen - this indicates success or failure. How do you do this with Flux?

I was thinking about creating a Notification component and rendering it in my form. As below:

 <Notification title={this.state.notification.title} message={this.state.notification.title} visible={this.state.notification.visibility} // ?? onTimeExceeded ?? /> 

But how do I handle these callbacks? Should I create a NotificationStore that listens for ANNOUNCEMENT_PUBLISHING_SUCCEEDED and ANNOUNCEMENT_PUBLISHING_FAILED events? In response to these events, the store emits a CHANGE event and thus my notification updates.

But even if I do, how should I indicate my notification to show / hide? Or worse, to show and hide after 2 seconds?

I saw several components on GitHub , and each of them uses links, etc., which I personally don’t like.

To summarize: How would you implement this? Or maybe such a project exists? If so, where can I find it?

Answer 1

I don’t see anything wrong with the fact that I have a store exclusively for notifications, especially if you want the logic to show / hide timer notifications, show a lot of notifications, etc.

There are two ways that I would like to write:

• Bind the NotificationStore directly to the success / failure callbacks that you care about, as you mentioned in your question. Not sure which stream implementation you are using, so it will be pseudocode-y.

   class NotificationStore { constructor() { this.notificationId = 0; this.notifications = {}; this.bindActionType( CLEAR_NOTIFICATION, this.handleClearNotification ); this.bindActionType( ANNOUNCEMENT_PUBLISHING_SUCCEEDED, this.handleAnnouncementPublishingSucceeded ); // etc... } handleAnnouncementPublishingSucceeded(action) { this.addNotification("Success!", { timeout: 2000 }); } handleClearNotification(action) { this.removeNotification(action.notificationId); } addNotification(message, options) { const nextId = this.notificationId++; const notification = { message: message }; this.notifications[nextId] = notification; this.emit("change"); // if we specified a timeout, remove the notification // after the timeout expires. if (options.timeout) { setTimeout(() => { dispatch(CLEAR_NOTIFICATION, { notificationId: nextId }); }, options.timeout); } } removeNotification(notificationId) { delete this.notifications[nextId]; this.emit("change"); } } 

• Indicate the notifications you want in your action creators. This is more explicit, but less centralized.

   var publishAnnouncement = function (announcement) { AnnouncementAPI.publishAnnouncement( announcement, (response) => { dispatch(ANNOUNCEMENT_PUBLISHING_SUCCEEDED, ...); dispatch(CREATE_NOTIFICATION, { message: "Success!", timeout: 2000 }); }, (error) => { dispatch(ANNOUNCEMENT_PUBLISHING_FAILED, ...); dispatch(CREATE_NOTIFICATION, { message: "Failure!" }); } ) }; 

  In this case, the NotificationStore will look basically the same, but without being tied to each result / failure. In any case, I will have one “Notifications” widget at the top of my component tree, which displays a list of notifications.

Answer 2

In defense of links (and as the author of the associated GitHub repository): your stores can generate an event when they change, which will have a handler in the component. This handler then triggers a notification through ref. It is much less complicated if your component processes the notification using links instead of details.