title: Best way to implement modals and notifications in React Flux
body: <p>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. </p>
  
  <ol>
  <li>No stores </li>
  </ol>
  
  <p>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);</p>
  
  <p>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. </p>
  
  <p>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</p>
  
  <pre><code>APIManager.post(url, postData).then(function(response) {
      NotificationHelper.create(&lt;SuccessNotification /&gt;)
  });
  </code></pre>
  
  <p>I don't know if it's correct to call something like this from action creator that renders a new component. </p>
  
  <ol start="2">
  <li>With stores</li>
  </ol>
  
  <p>Another approach is to create a NotificationStore and on emitChange render the notification component. 
  The code will look something like this</p>
  
  <p>In my App.js, the code will be</p>
  
  <pre><code>&lt;body&gt; 
      &lt;Header /&gt;
      &lt;Fooder /&gt;
     &lt;NotificationContainer /&gt;
  &lt;/body&gt;
  </code></pre>
  
  <p>And then in NotificationContainer, I will do something like</p>
  
  <pre><code>onChange: function() {
      this.setState({customNotification: NotificationStore.get()});
  },
  render: function() {
      &lt;Notification&gt;
          {this.state.customNotification}
      &lt;/Notification&gt;
  }
  </code></pre>
  
  <p>And finally, the action creator will look something like</p>
  
  <pre><code>Dispatcher.dispatch({
     actionType: 'notification',
     component:  &lt;MyComponent/&gt;
  });
  </code></pre>
  
  <p>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. </p>
  
  <p>Also, I now need to initialize NotificationContainer at the start of my app, even though I don't have any notifications at this point. </p>