Flux Store 和带有临时数据的操作答案

【问题标题】：Flux Store and actions with temporary dataFlux Store 和带有临时数据的操作
【发布时间】：2015-12-08 18:29:55
【问题描述】：

注意：这是https://stackoverflow.com/questions/32536037/flux-store-collection-by-criteria-vs-single-item的后续问题，但独立理解和回答。

假设我们有一个用于管理 (CRUD) 任务的应用程序。一项操作是任务编辑。

首先，编辑视图使用操作创建器加载任务，该操作创建器从服务器异步获取任务并将 TASK_LOAD_SUCCESS 事件与任务负载一起分派。接下来，任务存储存储任务并发出更改事件，以便编辑视图可以读取它并填写表单。

当用户提交表单时，应保存更改并关闭编辑视图。

在提交时，编辑视图告诉动作创建者异步保存任务。在 AJAX 成功时，TASK_SAVE_SUCCESS 被分派（到任务存储）。

Q1：任务商店应该做什么？它是否应该更新其内部标志以表明任务已被保存，然后发出更改事件，然后视图应该从存储中读取该标志并在它为真时自行关闭？

Q2：Store 是否应该在之前加载的 Tasks 集合中找到 Task 并在那里更新？集合中的其他任务将保持陈旧状态（请参阅https://stackoverflow.com/questions/32536037/flux-store-collection-by-criteria-vs-single-item 中的 Q2）。

Q3：如果我们再次编辑任务会怎样？ Store 仍然有 Task 已成功保存的标志，它会立即自行关闭。但那是上一次的存档。如何处理？

如果我们想删除一个任务，就会出现类似的问题。我们使用乐观锁定，因此我们必须首先从服务器读取任务，然后显示确认对话框，最后删除服务器上的任务（从第一次读取时提供 ETag）。

Q4：如何使用store来表示Task已经加载完成删除？在此 AJAX 调用期间，可能会有另一个异步读取操作完成，并且会与此发生冲突。是否应该有一个单独的 Store 用于 Task 删除？

Q5：这与 Q1 相同。删除后如何告诉视图它已完成以便它可以关闭确认对话框？

【问题讨论】：

标签： flux

【解决方案1】：

Q1-Q3：您可以在 TaskStore 中存储 edit_timestamp 并在确认对话框中存储 open_timestamp。在emitChange 上，您可以比较edit_timestamp > open_timestamp。

Q4：您可以在获取请求时为每个 taskId 缓存请求 Promise。因此，您可以订阅现有的 Promise，而不是两次执行相同的请求（读取/删除相同 taskId 的提取）。这允许您只保留单个任务实例，我希望避免 Q5 问题：

//To imagine how to arrange promise-based async interaction you may look here http://mjw56.github.io/handling-asynchronous-data-flow-in-flux/index.html
var promises = {};

//Returns Promise
var asyncGetCall = function(taskId) {...}
var getTaskForDelete, getTaskForRead;

getTaskForDelete = getTaskForRead = function(taskId) {
   if (!promises[taskId]) {
     promises[taskId] = asyncGetCall(taskId);
   }    
   return promises[taskId];
}

getTaskForDelete(10).then(function() {...}); //do asyncGetCall
getTaskForRead(10).then(function() {...}); // do nothing, wait for the first req results

【讨论】：