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

Solution 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.