title: How to create API calls in REACT and FLUX
body: <p>I'm new to react and flux and I am having a hard time trying to figure out how to load data from a server. I am able to load the same data from a local file with no issues.</p>
  
  <p>So first up I have this controller view (controller-view.js) that passes down initial state to a view (view.js)</p>
  
  <p><strong>controller-view.js</strong></p>
  
  <pre><code>var viewBill = React.createClass({
  getInitialState: function(){
      return {
          bill: BillStore.getAllBill()
      };
  },
  render: function(){
      return (
          &lt;div&gt;
              &lt;SubscriptionDetails subscription={this.state.bill.statement} /&gt;
          &lt;/div&gt;
      );
  }
   });
   module.exports = viewBill;
  </code></pre>
  
  <p><strong>view.js</strong></p>
  
  <pre><code>var subscriptionsList = React.createClass({
  propTypes: {
      subscription: React.PropTypes.array.isRequired
  },
  render: function(){
  
     return (
          &lt;div &gt;
              &lt;h1&gt;Statement&lt;/h1&gt;
              From: {this.props.subscription.period.from} - To {this.props.subscription.period.to} &lt;br /&gt;
              Due: {this.props.subscription.due}&lt;br /&gt;
              Issued:{this.props.subscription.generated}
          &lt;/div&gt;
      );
  }
   });
   module.exports = subscriptionsList;
  </code></pre>
  
  <p>I have an actions file that loads the <strong>INITAL</strong> data for my app. So this is data that is <strong>not</strong> called by as user action, but called from <strong>getInitialState</strong> in the controller view</p>
  
  <p><strong>InitialActions.js</strong></p>
  
  <pre><code>var InitialiseActions = {
  initApp: function(){
      Dispatcher.dispatch({
          actionType: ActionTypes.INITIALISE,
          initialData: {
              bill: BillApi.getBillLocal() // I switch to getBillServer for date from server
          }
      });
  }
  };
  module.exports = InitialiseActions;
  </code></pre>
  
  <p>And then my data API looks like this</p>
  
  <p><strong>api.js</strong></p>
  
  <pre><code>var BillApi = {
  getBillLocal: function() {
      return billed;
  },
  getBillServer: function() {
      return $.getJSON('https://theurl.com/stuff.json').then(function(data) {
  
          return data;
      });
  }
  };
  module.exports = BillApi;
  </code></pre>
  
  <p>And this is the store
  <strong>store.js</strong></p>
  
  <pre><code>var _bill = [];
  var BillStore = assign({}, EventEmitter.prototype, {
  addChangeListener: function(callback) {
      this.on(CHANGE_EVENT, callback);
  },
  removeChangeListener: function(callback) {
      this.removeListener(CHANGE_EVENT, callback);
  },
  emitChange: function() {
      this.emit(CHANGE_EVENT);
  },
  getAllBill: function() {
      return _bill;
  }
  });
  
  Dispatcher.register(function(action){
  switch(action.actionType){
      case ActionTypes.INITIALISE:
          _bill = action.initialData.bill;
          BillStore.emitChange();
          break;
      default:
          // do nothing
  }
  });
  
  module.exports = BillStore;
  </code></pre>
  
  <p>So as I mentioned earlier, when I load data locally using BillApi.getBillLocal() in actions everything works fine. But when I change to BillApi.getBillServer() I get the followind errors in the console...</p>
  
  <pre><code>Warning: Failed propType: Required prop `subscription` was not specified in     `subscriptionsList`. Check the render method of `viewBill`.
  Uncaught TypeError: Cannot read property 'period' of undefined
  </code></pre>
  
  <p>I also added a console.log(data) to BillApi.getBillServer() and I can see that the data is returned from the server. But it is displayed <strong>AFTER</strong> I get the warnings in the console which I believe may be the issue. Can anyone offer some advice or help me to fix it? Sorry for such a long post.</p>
  
  <p><strong>UPDATE</strong></p>
  
  <p>I made some changes to the api.js file (check here for change and DOM errors plnkr.co/edit/HoXszori3HUAwUOHzPLG ) as it was suggested that the issue is due to how I handle the promise. But it still seems to be the same issue as you can see in the DOM errors.</p>