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

Question

如何初始化 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>
    )
}

Answer 1

我使用 AppBootstrap.js 模块来 (1) 实例化存储，(2) 使用来自服务器的初始数据分派(dispatch)初始化操作，以及 (3) 渲染根 React 组件。

示例:

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