Javascript 防止在持久化数据与API结果相同时调用API

这是Home.jsx，我在其中调用了一个api，使用redux和redux-thunk获取featuredGames。这是它第一次获取数据并使用redux persist lib持久化它们

class HomeView extends React.Component {
   componentDidMount() {
       this.props.getFeaturedGames();
   }

   render() {
      return(
         {!this.props.featuredGames.isFetching ? 
             <div>data</div>
             :
             loading
         }
      )
   }
}


const MapDispatchToProps = dispatch => {
   return{
      getFeaturedGames: () => {
          dispatch(fetchFeaturedGames());
      }
   }
};

const MapStateToProps = state => ({
   featuredGames: state.game.featuredGamesList,
   featuredGamesIsFetching: state.game.featuredGamesIsFetching,
});


export default connect(MapStateToProps, MapDispatchToProps)(HomeView);

类HomeView扩展了React.Component{
componentDidMount（）{
this.props.getFeaturedGames（）；
}
render（）{
返回(
{！this.props.featuredGames.isFetching？
数据
:
加载
}
)
}
}
const MapDispatchToProps=调度=>{
返回{
getFeaturedGames:（）=>{
分派（fetchFeaturedGames（））；
}
}
};
常量MapStateToProps=状态=>({
featuredGames:state.game.featuredGamesList，
FeaturedGamesFetching:state.game.FeaturedGamesFetching，
});
导出默认连接（MapStateTrops、MapDispatchToProps）（HomeView）；

每次我回到主视图，它都会调用api。我不想在每次装载时调用api，而是想检查是否有可用的持久化数据，组件渲染它们。然后，若持久化数据和api结果（发生在后台）不同，则使用新数据重新提交组件

可能吗？这是管理从api长时间加载数据的好方法吗？也可以接受任何代码改进

我也听说过重选库在这种情况下有帮助吗