你如何使用 Flux 管理异步 Store 操作?

IT技术 reactjs reactjs-flux
2021-04-08 12:16:12

在 Facebook 关于 Flux 架构的演讲中,Jing在 12:17提到调度器强制执行任何操作,直到商店完全处理当前操作。

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

这里的调度程序是强制执行没有级联效果的主要部分;一旦一个动作进入商店,你就不能再放入另一个动作,直到商店完全完成处理它。

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

2个回答

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

您将为用户操作提供一个单独的操作,例如TODO_UPDATE_TEXT在 TodoMVC 示例中,以及在服务器返回时调用的操作,例如TODO_UPDATE_TEXT_COMPLETED(或者可能只是更通用的内容,例如TODO_UPDATE_COMPLETED包含最新属性的新副本)。

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

@scttnlsn 您需要问问自己是否需要将该错误消息存储在 TodoStore 中。如果没有,那么作为建议,您应该为错误消息创建一个单独的数据存储,而处理错误消息的组件(例如警报消息组件)将使用这些数据存储。
2021-06-01 12:16:12
将一项任务分解为多个操作可能会使事情变得一团糟,如果两个或多个此类任务相互交织,那么避免它的最佳做法是什么?
2021-06-17 12:16:12
假设更新失败并且服务器返回您想要显示的错误消息。在 TODO_UPDATE_FAILED 处理程序中,您是否会将错误消息保存在待办事项存储中?
2021-06-21 12:16:12

请参阅 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 creator) 调度 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 请求不应该阻止操作被调度,因为这更像是对服务器的同步请求,页面的响应能力会受到影响。