30

在关于 Flux 架构的 Facebook 演讲中，Jing在 12:17提到调度程序强制在当前动作被商店完全处理之前不能调度任何动作。

https://img.youtube.com/vi/nYkdrAPrdcw/0.jpg

这里的调度程序是强制执行没有级联效果的主要部分；一旦一个动作进入商店，在商店完全处理完它之前，你不能再放入另一个动作。

那么，我的问题是，您如何正确处理可能从存储中启动的长时间运行的异步操作（例如 Ajax 请求，或处理一些其他外部异步 API）——任何阻止操作分派完成的事情（例如，等待通过 Ajax 请求的结果来解决一个 Promise）可能会阻止来自用户的 UI 生成的操作被分派。

4

2 回答 2

30

在我的理解中，依赖 Ajax 等的异步操作不应该阻止该操作被分派给所有订阅者。

您将为用户操作设置一个单独的操作，就像TODO_UPDATE_TEXT在 TodoMVC 示例中一样，并且在服务器返回时调用一个操作，例如TODO_UPDATE_TEXT_COMPLETED（或者可能只是更通用的操作，例如TODO_UPDATE_COMPLETED包含最新属性的新副本）。

如果您希望进行乐观更新以立即向用户显示其更改的效果，您可以立即更新存储以响应用户操作（然后在服务器返回权威数据时再次更新）。如果您想在服务器上等待，您可以让商店仅更新自身以响应服务器触发的操作。

于 2014-05-13T17:03:36.737 回答
2

请参阅 Sophie 在处理异步数据的这个fluxxor 示例中解释的实现。不利的一点是，按照这种方法，每个用户交互都需要三个动作（触发、成功和失败），但可能并非所有用户交互都需要这种乐观的方法。

重要的部分是在行动中：

loadBuzz: function() {
  this.dispatch(constants.LOAD_BUZZ);

  BuzzwordClient.load(function(words) {
    this.dispatch(constants.LOAD_BUZZ_SUCCESS, {words: words});
    }.bind(this), function(error) {
    this.dispatch(constants.LOAD_BUZZ_FAIL, {error: error});
    }.bind(this));
  },

BinaryMuse（fluxxor 创建者）调度 LOAD_BUZZ 动作，然后使用成功和失败函数触发异步请求，其中调度成功或失败动作。商店可以侦听 LOAD_BUZZ 操作以进行乐观更新或显示 svg 加载图标，然后侦听成功和错误操作以获取成功或错误的最终通知（加上将 BUZZWORD 保存在商店中）。

onLoadBuzz: function() {
  this.loading = true;
  this.emit("change");
},

onLoadBuzzSuccess: function(payload) {
  this.loading = false;
  this.error = null;

  this.words = payload.words.reduce(function(acc, word) {
    var clientId = _.uniqueId();
    acc[clientId] = {id: clientId, word: word, status: "OK"};
    return acc;
  }, {});
  this.emit("change");
},

我认为像 Sophie 一样，ajax 请求不应该阻止操作被分派，因为这更像是对服务器的同步请求，并且页面的响应性会受到影响。

于 2015-05-05T12:53:29.560 回答