title: Listening directly to Reflux Actions in Component
body: <p>From what I've read the pattern is the Components pass data to the Actions which Pass to the Store whose value changes trigger updates in Components that subscribe to the Stores.  My question is how to "react" to these triggered updates in the form of a notification? ( ie a successfully saved notification )</p>
  
  <p>Ie do I add logic to the render of this notification component that only displays itself if there is a some flag attribute in the object that its subscribed to?  Then deletes itself after a time.  This sounds wrong.</p>
  
  <p><strong>UPDATE</strong></p>
  
  <p>Thanks to Hannes Johansson I think I have a better grasp of a pattern.  What I have working is the following: </p>
  
  <ol>
  <li><p>Component passes data through action to the Store</p></li>
  <li><p>The Store interacts with the api and adds a flag to the model that the component is now notified of an updated model.</p>
  
  <pre><code>createItem: function (item) {
      $.ajax({
          url: '/items', 
          method: 'POST',
          data: item,
          success: function (item) {
              CurrentBrandActions.addCampaign(item);
              this.item = item;
              item.newlyCreated = true;
              this.trigger(item);
          }.bind(this)
      })
  }
  </code></pre></li>
  <li><p>The Component sees the flag and renders a "Notification Child Component"</p>
  
  <pre><code>var newlyCreated = this.state.item.newlyCreated === true;
  if (newlyCreated) {
    newlyCreated = &lt;ItemCreatedNotification item={this.state.item} /&gt;
  } else {
    newlyCreated = '';
  }
  return (
    &lt;form onSubmit={this.createItem} className="form"&gt;
      {newlyCreated}
  </code></pre></li>
  <li><p>Something needs to move the app to a new place based on this event. Should this be a) the Notification Child Component b) Parent Component c) The Store?</p></li>
  </ol>
  
  <p>According to <a href="https://www.youtube.com/watch?v=6fhTawDEE9k" rel="nofollow">Colin Megill's</a> talk on flux api patterns the api interaction should occur in the Action, but reflux doesn't really allow for that.</p>
  
  <p><strong>UPDATE 2</strong></p>
  
  <ol>
  <li><p>Component passes data to an Action called <code>createItemRequest</code></p></li>
  <li><p>The Action has a preEmit hook that actually does the api call.  The <code>createItemRequest</code> continues to the Store so that the store can change the model to reflect the state of sending which is then displayed in the component( maybe show a spinner ).  The Action is also responsible for firing two other events depending on the api result.</p>
  
  <pre><code>ItemActions.createItemRequest.preEmit = function (data) {
      $.ajax({
          url: '/items', 
          method: 'POST',
          data: data,
          success: function (item) {
              ItemActions.itemCreatedSuccess(item);
          },
          error: function (error) {
              ItemActions.itemCreatedError(error);
          }
      });
  }
  </code></pre></li>
  </ol>