React Redux - 删除对象的数据获取模式

Question

I have a react app that displays a list of data and a detail view when clicking on an entry. I also have a data fetcher that fetches data from my backend every 5 seconds.

In my detail view I have a delete button that will delete the object on the backend and then returns to the overview page. After the delete I want to have an instant refresh on the list of objects, so I call the fetching manually.

So this sometimes gets to a race condition where the automatic data fetching is already in process, the manual starts and finishes first (since the automatic one fetches more data), updates the list so that the deleted one is not shown anymore but then the automatic fetching overwrites this with the old data.

How is this commonly solved?

Answer 1

As I understand your scenario, I think you want to cancel the ongoing server call if a subsequent request is made. Tod o that you can use axios.CancelToken

For example,

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) 

Hope this will help you.