Loading Stores in React-Redux

Question

I am new to React-Redux, I have a app having all stores preloaded on the index.js file which is the entry point that renders the app . I have the following code in the page (a part of it).

   if(Auth.isUserAuthenticated()){
  store.dispatch(getProductCategories());
  store.dispatch(getProducts());
  store.dispatch(getAuctions());
  store.dispatch(getAppSettings());
  store.dispatch(getWalletTransactionHistory());
  store.dispatch(getAllUsers());
  store.dispatch(getParticipatedAuctions());
  store.dispatch(getParticipatedAuctionsList());        
  store.dispatch(getWalletBalance())
  }
  store.dispatch(getHomePageAuctions());
  store.dispatch(getAllPageAuctions());
  store.dispatch(getPriceCards());


render(
  <AppContainer>
    <App store={store} history={history} />
  </AppContainer>,
  document.getElementById('app')
);

The action in the above are dispatched on every route change, But i Wanted it to dispatch only once on the page load . I even tried to put it on App component in ComponentDidMount() and also tried in putting it in constructor() of that component but no luck didn't work as expected and also searched google but no luck with exact match or similar to it

Answer 1

I suggest moving your store.dispatch calls inside App.js' componentDidMount. Since App.js will only mount once, they'll only fire once.