reactjs - 使用磁通量的乐观更新(异步)

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

    });
}

这是允许乐观更新的适当方法，还是我在错误地考虑此内容？

最佳答案

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

    });
}

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