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

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

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

我想要的是进行一次调用并缓存它，每当任何组件需要此数据时，他们都可以从存储缓存中读取它。

我试图设置某种标志，无论是否获取数据，但由于所有实例都同时加载，它们都看到带有初始值的标志

法典：
在组件代码中，我有这个：

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

请注意：AppActions.getWeight()哪个是数据获取操作

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

我提出的解决方案：
1-将此数据作为来自顶级组件的props传递，但随后该组件将严重依赖父组件

2-在组件中，我可能会尝试从存储中获取数据，如果存储未在缓存中找到数据，则应触发获取操作但据我了解，从商店触发操作是反模式

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

多谢。