React - 防止独立组件同时获取数据

Question

我有一个大型应用程序，我在其中使用 redux 来存储获取的数据。每个需要数据的组件都会通过运行请求来确保它会获得所需的数据，并等待数据出现在

useSelector(state => state.dataReducer.data)

在大多数简单的使用中，这是可以的，但是当同一页面上的两个组件需要相同的数据时，它们都会运行获取

我的解决方案是（代码简化，我尝试了很多访问商店的方式）

if(store.getState().requests.hasOwnProperty(url)) {
   return false
}

store.dispatch(setRequest(url));

get(url).finally(() => {
   store.dispatch(unsetRequest(dataKey));});
})

不幸的是，当我需要执行异步存储更新时，异步存储更新不会执行其操作，并且当两个同步请求运行时，状态尚未更新。 出于测试目的，我运行另一个请求，超时时间为 200 毫秒，结果没问题，但在正常的应用程序上下文中，这是不可能的。 如何预防

Answer 1

这是一个常见问题。 有很多方法可以做到这一点，但总体思路应该是您的商店应该知道类似的 API 调用已经在进行中。您可以为每个

loading | loaded | null

组合保存生命周期状态，例如

URL + method + (data/queryParams)

等。在进行任何 API 调用之前检查此状态。

您可以使用一些哈希图来完成上述操作。但不需要针对此类一般问题进行自定义实现。

redux-saga

，

redux-thunk

可能会有所帮助。

react-query

应该也有用