3

我正在尝试向我的 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
        });

    });
}

这是允许乐观更新的适当方式还是我对这篇文章的看法不正确?

4

1 回答 1

3

@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
        });

    });
}

因此,如果您的响应成功,基本上您可以从商店中删除脏记录。否则,您可以参考商店中的脏记录,当您的应用程序仍在运行时,可以在后台再次尝试使用您的服务器。因此,从本质上讲,您的用户不必坐下来等待响应。

于 2015-01-19T13:09:53.063 回答