Loading initial state from server

[peternoyes]

I am building an application based on this kit and I cannot figure out the recommended way to load initial state from a server using a fetch call.

I have been following the advice found in this blog post: https://suspicious.website/2016/04/29/starting-out-with-react-redux-starter-kit/

Imagine if in his example the page were to load a Zen when the page is first loaded, rather than when a button is clicked. What would be the right way to do this? Or even if the counter example included in the kit were to get the initialCount from a service rather than hardcoding to 0.

Because the components are pure functional, the lifecycle functions such as componentDidMount are not available. I then thought that perhaps onEnter from react-redux could be used to fire an action to do the initial load, but because the routes are all declared dynamically I can't figure out where onEnter could be set to fire an action.

It would be great if this kit showed a recommended way to load a page with initial state from the server. Forgive me if my question has an easy answer and is documented somewhere, I am pretty new to react and redux.

[patrickgordon]

Previously I had dispatched an action/s in src/main.js. Something like:

// other imports
import {fetchCurrentUser} from './redux/modules/auth'
...

// This checks to see if there is a token in the localStorage. If it does exist, it will pass it on
// dispatch the fetch current user action in order to trigger the population of the state with the current user
if (localStorage.getItem('id_token')) {
  store.dispatch(fetchCurrentUser())
}

...

Would be very interested in seeing other's opinions / strategies as this was just an idea I had at the time.

[simonedavico]

The onEnter approach you mention is fine to load data when a route is entered. What do you mean by "the routes are all declared dynamically"? The routes are declared as react-router objects.

For the routes that are configured to be code-split, there is a function that takes a store and returns a react-router object. The only difference with the usual routes is that, instead of specifying a component, a getComponent function that dynamically requires the component for the route is specified. You can set onEnter on those routes and retrieve your data.

export default (store) => {
   path: '...',
   getComponent(nextState, cb) {
      //... 
   },
   onEnter: ... 
}

[piu130]

This is how I'm trying to load it. But it has a bug.