title: ReactJS and Reflux listening to a store before component mounts
body: <p>I have this doubt that I haven't been able to google out yet but I have this react component that I want to update it's state using a reflux store using componentWillMount() method. </p>
  
  <p>I am able to update the state in the store but using this.trigger to update it's state from the store didn't give me the updated state of the data which got me confused. How can I get the updated state of the data. </p>
  
  <p>Here is what my component is like at the moment </p>
  
  <pre><code>var Challenges = React.createClass({
  
      contextTypes: {
  
              router: React.PropTypes.func
      },
  
      mixins: [Reflux.connect(ChallengeStore,'challenges')],
  
      getInitialState: function() {
          return {
              challenges: []
          }
      }
  
      componentDidMount: function() {
  
              var trackId = this.props.params.trackId; // the url
  
              ChallengeActions.GetChallenges(trackId);
  
              console.log(this.state);
  
      },
  
      render: function () {
  
          return(
                 &lt;div&gt;
                          &lt;h1&gt;{ this.state.challenges.title }&lt;/h1&gt;                                    &lt;List challenges={ this.state.challenges } /&gt;
              &lt;/div&gt;
          );
  
      }
  
  });
  </code></pre>
  
  <p>And my store here </p>
  
  <pre><code>    var ChallengeStore = Reflux.createStore({
  
      listenables: ChallengeActions,
  
      onGetChallenges: function(url) {
  
          var items = ChallengeService.getChallenges(url);
  
          this.trigger({
              challenges: items
          });
      }
  
  });
  </code></pre>