React Redux - шаблон извлечения данных с удалением объектов

Question

У меня есть приложение реагирования, которое отображает список данных и подробный вид при нажатии на запись. У меня также есть сборщик данных, который извлекает данные из моего бэкэнда каждые 5 секунд.

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

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

Как это обычно решается?

Answer 1

Как я понимаю ваш сценарий, я думаю, что вы хотите отменить текущий серверный вызов, если будет сделан следующий запрос. Чтобы вы могли использовать axios.CancelToken

Например,

var axios = require("axios")

var CancelToken = axios.CancelToken;
var call1 = CancelToken.source();
var call2 = CancelToken.source();

axios.get('http://your/api/call', {
  cancelToken: call1.token
}).catch(function(thrown) {
  if (axios.isCancel(thrown)) {
    console.log('Ongoing server call is cancelled', thrown.message);
  } else {
    // handle error
  }
});

setTimeout(function() {
    // Cancel ongoing server call
    call1.cancel('Stopping current server call');

    // Server call on delete
    axios.get('https://your/api/call', {
      cancelToken: call2.token
    }).then(function(response) {
        console.log('Success', response.status);
    });
}, 1000) 

Надеюсь, это поможет вам.