title: Flux pattern to initialize Store
body: <p>Good Morning All!</p>
  
  <p>I've a react Component (a View) that's dependent on a Store which is in turn dependent on having some state pulled from a round-trip to the server.</p>
  
  <p>What I'm looking to understand is if there's a common pattern to solve for initializing the Store's state.</p>
  
  <p>Right now I'm thinking I'd do something like:</p>
  
  <pre><code>var SomeView = React.createClass({
    componentWillMount: function() {
      SomeStore.addChangeListener(this._onChange);
  
      // Go and tell this thing we want to initiliaze our
      // state ahead of time. My worry here is obviously 
      // that when state is updated this fires again so I'd
      // need to have some knowledge that the store has been
      // initialized which seems very (very) kludgey
      SomeActions.init();
    },
  
    render: function() {
      // Here i'd want to see if I had items available for
      // rendering. If I didn't I'd drop on a loading dialog
      // or if I did I could render the detail.
    },
  
    _onChange: function() {
       // this.setState...
    }
  });
  
  
  var SomeActions = {
    init: function() {
      AppDispatcher.dispatch({
        actionType: SomeConstants.INIT
      });
    }
  };
  
  
  var SomeStore = assign({}, EventEmitter.prototype, { 
    init: function() {
      $.get('/round/trip', function(data) {
        this.emitChange();
      }).bind(this);
    }
  
    emitChange: function() {
      this.emit(CHANGE_EVENT);
    },
  
    addChangeListener: function(callback) {
      this.on(CHANGE_EVENT, callback);
    }
  });
  
  
  AppDispatcher.register(function(action) {
    switch(action.actionType) {
      case SomeConstants.INIT:
        SomeStore.init()
        break;
  
      default:
    }
  });
  </code></pre>
  
  <p>I am absolutely positive there must be a better way.</p>