Flux：从 AJAX 向组件返回值

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。

Answer 2

使用 Flux 的设置要求您以不同的方式思考数据流动的方式。您可以做的是设置您的商店，以便首先包含对allProfiles 的引用，即undefined（或null 或您喜欢的任何指定的“空”值），然后在@987654326 时更新@ 被调用：

var allProfiles;  // the reference to your profile data

var ProfileStore = merge(EventEmitter.prototype, {

  getAll: function() {
    var thisStore = this;

    var url = "YOUR MONGO URL"
    var jsPromise = Promise.resolve($.ajax(url));
    jsPromise.then(function(response) {
        allProfiles = response
        this.emitChange();
    });

    return allProfiles;
  }

// other methods omitted to save space

我应该指出你在这里使用的承诺是不正确的。 then 函数返回另一个承诺，因此您将 allProfiles 设置为承诺，而不是集合。在上面的示例中，我们返回对配置文件数据的引用，该引用将在 AJAX 调用完成后更新。数据更新后，存储会发出更改，让所有侦听器知道他们也应该更新。

在您的组件中，您可以将其设置为侦听您的ProfileStore 上的CHANGE_EVENT，以便在ProfileStore 的数据更改时更新其状态。但是请注意，一开始，allProfiles 数据将为空，因此我们需要向用户传达我们正在加载数据：

var ProfileApp = React.createClass({

  updateAllProfiles: function () {
    this.setState({
      allProfiles: ProfileStore.getAll()
    });
  },

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

  componentDidMount: function() {
    ProfileStore.addChangeListener(this.updateAllProfiles);
  },

  componentWillUnmount: function () {
    ProfileStore.removeChangeListener(this.updateAllProfiles)
  },

  render: function () {
    var profiles;
    if (this.state.allProfiles) {
      // you'll need to figure out how you want to render the profiles
      // the line below will likely not be enough
      profiles = this.state.allProfiles;  
    } else {
      profiles = 'Loading...';
    }
    return <div id='profiles'>{profiles}</div>;
  }

});

我在 JSFiddle 上做了一个非常人为的例子。由于环境的限制，我不得不想出几个模拟的hack，但我希望你能修改这个例子，更好地了解发生了什么：http://jsfiddle.net/berh6gxs/2/

我还掩盖了很多细节（例如，您可能希望在 ProfileApp 组件上实现 shouldComponentUpdate 方法，以便仅在数据实际更改时重新渲染），但我感觉到了这些细节对回答手头的问题不太重要。我之所以提到这一点，是因为您无法接受我在这里所说的并立即想出一个完美的解决方案。

我还建议研究 Flux 的第三方实现。雅虎提出了一个非常好的：https://github.com/yahoo/flux-examples

黑客愉快！

Answer 3

这段代码：

jsPromise.then(function(response) {
    return response;
});

没有做我认为你认为的事情。它等待jsPromise 解析，并使用响应调用回调，并且从回调返回的任何内容都将成为从jsPromise.then 返回的new promise 的已解析值。查看 this JavaScript Promises guide 了解有关 Promise 工作原理的更多信息。

至于您的问题：简而言之，您不能从异步操作中返回值；你总是不得不求助于回调。例如：

var ProfileStore = merge(EventEmitter.prototype, {
  // getAll returns a Promise that resolves to all the profiles
  getAll: function() {
    var url = "..."
    return Promise.resolve($.ajax(url));
  },
  // ...
});

var ProfileApp = React.createClass({
  getInitialState: function() {
    return {
      allProfiles: [] // initially we have no profiles
                      // could also have some "loading" sentinel, etc
    };
  },

  componentDidMount: function() {
    // Then we ask for all the profiles and *asynchronously*
    // set the state so the component updates.
    ProfileStore.getAll().then(function(response) {
      this.setState({allProfiles: response});
    }.bind(this));
  }
});