React.js + Flux - Init data objects in stores properly

Question

How do you init data objects in Flux stores?

class MyStore {
   constructor() {
      this.myData = {}; 
      // or
      this.myData = null;
   }

   onReceiveData(data) {
      this.myData = data;
   }
}

In my React component I'm checking whether the data is loaded from the server to render child:

render() {
    // <Child /> has required props in `data` object
    return (
        <div>
            {!this.state.myData ? (
               <div>Loading...</div>
            ) : (
               <Child data={this.state.myData} />
            )}
        </div>
    )
}

Answer 1

I use an AppBootstrap.js module to (1) instantiate the stores, (2) dispatch an initialization action, with the initial data from the server, and (3) render the root React component(s).

Example:

// AppBootstrap.js

var AppConstants = require('AppConstants');
var AppDispatcher = require('AppDispatcher');
var AppRoot = require('AppRoot.react');
var React = require('React');

require('FriendStore');
require('LoggingStore');
require('MessageStore');

module.exports = (initialData, elem) => {
  AppDispatcher.dispatch({
    type: AppConstants.ActionTypes.INITIALIZE,
    data: initialData
  });
  React.render(<AppRoot />, elem);
};

Answer 2

View should always listen to Store data changes according to the flux structure. Thus your view should not be checking if store has data. Instead, Store should inform the views that data has changed.

Example:

var ActionConstants = require('../constants/action-constants.js');
var AppDispatcher = require('../dispatcher/app-dispatcher.js');
var React = require('react');
var EventEmitter = require('events').EventEmitter;

var MyStore = assign({}, EventEmitter.prototype, {
  items_: [],

  emitChange: function() {
    this.emit(ActionConstants.stores.DATA_CHANGED);
  },

  addChangeListener: function(callback) {
    this.on(ActionConstants.stores.DATA_CHANGED, callback);
  },

  removeChangeListener: function(callback) {
    this.removeListener(ActionConstants.stores.DATA_CHANGED, callback);
  }
});

MyStore.dispatchToken = AppDispatcher.register(function(payload) {
  switch(payload.type) {
    // Handle store initiation on action result received.
    // Also broadcast the data change event to listeners.
    case ActionConstants.MyStoreInit:
      MyStore.init(payload.data);
      MyStore.emitChange();
  }
}