Where do I fetch initial data from server in a React Redux app?

Question

I\'ve started learning React / Redux and stumbled on something that is probably a very basic question. Below are snippets from my app with some code removed for simplicity s

Answer 1

There's no reason for this data load logic to touch your React components at all. What you want here is for the return of the promise to dispatch an action to your reducers, which make the appropriate changes to the store, which then causes the React components to re-render as appropriate.

(It doesn't matter whether you kick off the async call before or after you call ReactDOM.render; the promise will work either way)

Something like this:

var store = createStore(publishedSitesPageReducer);

someAsyncCall().then(function(response) {
  store.dispatch(someActionCreator(response));
});

ReactDOM.render(
  <Provider store={store}>
    <PublishedSitesPage />
  </Provider>,
  this.$view.find('.js-published-sites-result-target')[0]
);

Your React components are consumers of your store, but there's no rule that they need to be the ONLY consumers of your store.

Answer 2

There is a clear example here on how to do it : Facebook Tutorial

As for the endless loop, Once your array is no longer empty , Clear the Interval. This should prevent the loop.