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

Posted 2023-03-10

【中文标题】React Redux - 删除对象的数据获取模式

【英文标题】：React Redux - data fetching pattern with deletion of objects

【发布时间】：2020-03-05 15:46:16

【问题描述】：

我有一个 react 应用程序，在单击条目时会显示数据列表和详细视图。我还有一个数据获取器，它每 5 秒从我的后端获取数据。

在我的详细视图中，我有一个删除按钮，它将删除后端的对象，然后返回到概览页面。删除后我想对对象列表进行即时刷新，所以我手动调用获取。

所以这有时会出现竞争条件，其中自动数据获取已经在进行中，手动开始并首先完成（因为自动获取更多数据），更新列表以便不再显示已删除的数据，但是然后自动提取会用旧数据覆盖它。

这通常是如何解决的？

【参考方案1】：

据我了解您的情况，我认为如果发出后续请求，您想取消正在进行的服务器调用。 Tod o 你可以使用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) 

希望这会对你有所帮助。