您如何使用 Flux 管理异步 Store 操作？答案

【问题标题】：How do you manage asynchronous Store operations with Flux?您如何使用 Flux 管理异步 Store 操作？
【发布时间】：2014-07-01 09:43:44
【问题描述】：

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

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

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

【问题讨论】：

标签： reactjs reactjs-flux

【解决方案1】：

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

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

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

【讨论】：

假设更新失败并且服务器返回您想要显示的错误消息。在 TODO_UPDATE_FAILED 处理程序中，您会将错误消息保存在 todo 存储中吗？
@scttnlsn 你需要问问自己是否需要将错误消息存储在 TodoStore 中。如果不是，那么作为建议，您应该为错误消息创建一个单独的数据存储，而这些数据存储又将由处理错误消息的组件（例如警报消息组件）使用。
用多个动作打破一个任务可能会搞砸，如果两个或多个这样的任务相互交织，避免这种情况的最佳做法是什么？

【解决方案2】：

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

重要的部分在行动中：

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 请求不应该阻止操作被分派，因为这更像是对服务器的同步请求，并且页面的响应性会受到影响。

【讨论】：