如何在带回流的商店中使用Ajax获得初始状态

Question

最近我一直在研究React和Replux。我被卡住的一部分是，我无法在Replux商店中使用Ajax获得初始状态。我尝试的只是在store.js中的getInitialState函数中调用ajax($.getJSON)，用AJAX响应（JSON）设置初始状态，然后弄清楚状态是什么。我希望从AJAX调用获得的输出将是JSON数组列表，但实际输出将为undefined

那么，我如何在带有反流的商店中与Ajax一起使用？

代码就是这样...

// in store.js
getInitialState: function() {
  $.getJSON('/sample').done(function(result){
    this.list = result;
  });
  return this.list;
}
// in sampleApp.jsx
mixins: [Reflux.connect(Store, "list")],
  render() {
    console.log(this.state.list);
    // I expected this output would be JSON lists, but the actual output will be undefined.
    return ();
  } 

Answer 1

此代码有许多问题：

getInitialState: function() {
  $.getJSON('/sample').done(function(result){
    this.list = result;
  });
  return this.list;
}

首先，在AJAX请求返回数据之前，您的返回this.list。这有效地意味着您正在从该功能中返回undefined。第二个问题是您在AJAX回调中使用this，这不会指向Reflux Store。您需要为此使用箭头功能和ES6转材。

但是，无论如何您都不应该在getInitialState中执行AJAX请求。您正在寻找的是这样的东西：

var MyStore = Reflux.createStore({
  getInitialState: function () {
    return {
      list: []
    }
  },
  init: function () {
    var self = this;
    $.getJSON('/sample').done(function (result) {
      self.trigger({list: result});
    });
  }
});