CODEWITHSUNDEEP
javascriptreactjs-fluxreactjsflux
Kosmetika
Kosmetika

Reputation: 21304

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

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>
    )
}

Upvotes: 2

Views: 1835

Answers (2)

fisherwebdev
fisherwebdev

Reputation: 12690

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);
};

Upvotes: 4

IcyBright
IcyBright

Reputation: 664

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();
  }
}

Upvotes: 1

Related Questions