使用Flux的乐观更新(异步)

时间:2015-01-16 21:36:25

标签: reactjs asynchronous reactjs-flux optimistic-ui

我正在尝试为我的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 个答案:

答案 0 :(得分: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
        });

    });
}

基本上,如果您的回复成功,则会从商店中删除脏记录。否则,您的商店中有脏记录的引用,可以在应用程序仍在运行时在您的服务器后重试。因此,从本质上讲,您的用户无需等待响应。