使用 Flux 的乐观更新(异步)
Posted
技术标签:
【中文标题】使用 Flux 的乐观更新(异步)【英文标题】:Optimistic Updates Using Flux (async) 【发布时间】:2015-03-15 14:24:58 【问题描述】:我正在尝试向我的 Flux 模型添加乐观更新。我将 UI 操作分派和服务器操作分派合并为一个操作。我在动作创建器中的代码如下所示:
deleteItem: function(itemId)
// optimistic update
WebshipDispatcher.handleServerAction(
type: ActionTypes.DELETE_ITEM,
deleteStatus: 'success',
itemId: itemId
);
// now let's actually check if that was the correct result
AppAjaxUtil.get('/deleteItem', itemId: itemId, function(result)
WebshipDispatcher.handleServerAction(
type: ActionTypes.DELETE_ITEM,
deleteStatus: result.status, // 'success' or 'failure'
itemId: itemId
);
, function(error)
WebshipDispatcher.handleServerAction(
type: ActionTypes.DELETE_ITEM,
error: error
);
);
这是允许乐观更新的适当方式还是我对这篇文章的看法不正确?
【问题讨论】:
一般来说,这看起来不错。这里代码的一大缺失部分是商店中发生的事情。如果没有看到该代码,很难说你是否做错了什么。我认为大多数人会为您正在进行的不同操作创建单独的操作类型,但不一定有任何理由这样做——它可能会使商店里的东西更干净一些。 【参考方案1】:@fisherwebdev 是对的。真正的逻辑将发生在您的商店中。例如,当项目确实无法删除时,您将如何处理逻辑?它自己变成了一头野兽。除非您得到服务器的确认,否则您真的不想从商店中删除该商品。像 Ext 这样的库在等待服务器成功响应时将记录标记为脏记录。所以更新仍然乐观地进行,但是如果服务器出现故障,用户和记录会得到通知。
因此,您的商店中可能有一组 dirty
记录,当您的服务器成功响应时,这些记录将被删除。这很粗略,但类似于以下内容:
deleteItem: function(itemId)
// optimistic update
WebshipDispatcher.handleServerAction(
type: ActionTypes.MARK_ITEM_AS_DIRTY,
deleteStatus: 'success',
itemId: itemId
);
// now let's actually check if that was the correct result
AppAjaxUtil.get('/deleteItem', itemId: itemId, function(result)
WebshipDispatcher.handleServerAction(
type: result.status ? ActionTypes.DELETE_ITEM : ActionTypes.DELETE_ITEM_FAIL,
deleteStatus: result.status, // 'success' or 'failure'
itemId: itemId
);
, function(error)
WebshipDispatcher.handleServerAction(
type: ActionTypes.DELETE_ITEM_FAIL,
error: error,
itemId: itemId
);
);
因此,如果您的响应成功,基本上您会从商店中删除脏记录。否则,您可以参考商店中的脏记录,当您的应用程序仍在运行时,可以在后台再次尝试使用您的服务器。因此,从本质上讲,您的用户不必坐下来等待响应。
【讨论】:
以上是关于使用 Flux 的乐观更新(异步)的主要内容,如果未能解决你的问题,请参考以下文章
Elasticsearch的乐观并发控制和分片管理(更新中)