Javascript React.js+；Flux-正确初始化存储中的数据对象

如何在Flux存储中初始化数据对象

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

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

在我的React组件中，我正在检查是否从服务器加载数据以呈现子对象：

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

render（）{
//在“数据”对象中具有必需的道具
返回(
{！this.state.myData(
加载。。。
) : (
)}
)
}

我使用AppBootstrap.js模块来（1）实例化存储，（2）使用来自服务器的初始数据分派初始化操作，以及（3）呈现根组件

例如：

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

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

//AppBootstrap.js
var AppConstants=require（'AppConstants'）；
var AppDispatcher=require（'AppDispatcher'）；
var approt=require（'approt.react'）；
var React=要求（'React'）；
需要（“友谊商店”）；
要求（“日志存储”）；
require（'MessageStore'）；
module.exports=（初始数据，元素）=>{
AppDispatcher.dispatch({
类型：AppConstants.ActionTypes.INITIALIZE，
数据：初始化数据
});
反应。呈现（，元素）；
};

视图应始终根据流量结构侦听存储数据的更改。因此，您的视图不应该检查存储是否有数据。相反，存储应该通知视图数据已更改

例如：

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

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

---

我会使用

null

。。。比空对象更容易检查！