Оптимистичные обновления с использованием Flux (асинхронно)

Question

Я пытаюсь добавить оптимистичные обновления в мою модель Flux. Я задерживаю диспетчеризацию действий пользовательского интерфейса и диспетчеризацию действий сервера в одном действии. Мой код в создателе действий выглядит так:

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

    });
}

Это подходящий способ для оптимистичных обновлений, или я неправильно думаю об этой части?

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

    });
}

Таким образом, вы удаляете грязную запись из своего магазина, если ваш ответ успешен. В противном случае у вас есть ссылка на ваши грязные записи в вашем магазине, которые вы можете попробовать еще раз с вашим сервером за кулисами, пока ваше приложение все еще работает. Таким образом, по сути, ваш пользователь не должен сидеть и ждать ответа.