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

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

    }); 
} 

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