AysnLoading.md

Async Loading of Initail Content with Flux-Alt

The best approach to aysnc load content into data store in Flux-Alt is to

Defined an export method in data store. This is to make sure that all sub components have subscribe the change of the store.

    this.exportPublicMethods({
      load: this.load
    });

Call the exported method from application root component

  componentDidMount() {
    NewsStore.load();
  },

Define the exported method which calls an action to trigger UI update after async all is done.

  load(){
    var self = this;
    var url = "data/rss.json";
    // exported method has different this context from member method
    // "this" is AltStore and must use getState() to access state
    var { news, error } = this.getState();

    $.ajax({
      url: url
      //dataType: 'jsonp'
    })
    .done(function(result){
      var data = result;
        // it is better to a deep copy to creat new reference to state than doing in place change if want to use shouldComponentUpdate later in components
      data.responseData.feed.entries.map(function(entry, i){
        news[i]=entry;
        news[i].id = i;
        news[i].color = 'darkblue';
      })

      NewsActions.init();

    })
    .fail(function(error){
      error = JSON.stringify(error);
    });
  }