如何在具有数据请求的多个React.js组件实例时处理缓存？

Question

我正在开发一个项目，在同一页面上我有多个React组件。 其中一些人正在进行相同的Web服务调用

当我运行应用程序时，我发现此服务调用是两次甚至更多取决于实例数

我想要的是进行一次调用并对其进行缓存，每当任何组件想要这些数据时，他们都可以从商店缓存中读取它。

我尝试设置某种标志，无论数据是否被提取，但因为所有实例都在同时加载，所有实例都看到带有初始值的标志

代码：
在组件代码中我有这个：

class WeightCharts extends React.Component {
componentWillMount() {
    const Component = this;
    this.state = {
        weight: null
    }
    AppActions.getWeight();

}

请注意：AppActions.getWeight()这是数据提取操作

因此，如果我有3个<WeightCharts />个实例，则会进行4次调用

我提出的解决方案：
1-将此数据作为道具从顶级组件传递，但该组件将严重依赖于父组件

2-在组件中我可能会尝试从商店获取数据，如果商店没有在缓存中找到数据，它应该触发获取操作 但据我所知，从商店触发行动是反模式

如果你想深入了解我的项目是开源的：
https://github.com/muhammad-saleh/weightlyio

非常感谢。

Answer 1

请查看https://github.com/facebook/dataloader

  

DataLoader是一个通用实用程序，可用作应用程序数据提取层的一部分，通过批处理和缓存在各种远程数据源（如数据库或Web服务）上提供简化且一致的API。