reactjs - 通量: return values from AJAX to the component

Question

我正在开发简单的 Flux+Reactjs 应用程序，在我的商店中我有:

var ProfileStore = merge(EventEmitter.prototype, {
/**
   * Get the entire collection of Profiles.
   * @return {object}
   */
  getAll: function() {
    //ajax call to mongolab
    var url = "https://api.mongolab.com/api/1/databases/bar/collections/profiles?apiKey=foo-"
    var jsPromise = Promise.resolve($.ajax(url));
    jsPromise.then(function(response) {
        return response;
    });

  },

  emitChange: function() {
    this.emit(CHANGE_EVENT);
  },

  /**
   * @param {function} callback
   */
  addChangeListener: function(callback) {
    this.on(CHANGE_EVENT, callback);
  },

  /**
   * @param {function} callback
   */
  removeChangeListener: function(callback) {
    this.removeListener(CHANGE_EVENT, callback);
  }
});

然后在我的组件中我有:

var ProfileApp = React.createClass({

    getInitialState: function() {
        return {
            allProfiles: ProfileStore.getAll()
        };
    },

});

当我在 getAll() 函数中使用 console.log() 时，我可以看到结果，但没有任何内容被传递到我的组件，有关于如何修复此问题的指示吗？

Answer 1

其他人指出了您的代码中与 promise 相关的问题。但是，您尝试在商店中执行的操作的另一个问题是您尝试直接处理响应，而不是调度新操作。

在 Flux 中，数据应始终源自操作。函数 getAll() 应该仅返回本地存储的 allProfiles，类似于 andrewkshim 的建议，但没有 XHR。

相反，请将您尝试执行的操作分成以下类型的两个操作:

PROFILES_REQUEST_GET :这是由用户单击按钮或任何导致发出请求的原因创建的 - 它会启动 XHR 请求。

PROFILES_REQUEST_SUCCESS :这是 XHR 的成功回调创建的操作。此操作包含新数据，商店可以相应地填充其 allProfiles。