Where is best place to load data from redux-store ?

Question

I use componentDidMount() method in my parent React component to fetch some data from API, which are then saved in redux-state.

In my render method, I have another component which should use data from the global redux-state.

I can send data to my child component via props or I can load them using mapStateToProps().

If I try to console.log or assign data to var from props in my child component constructor or in componentDidMount() method, I'm not getting my data as expected (I'm getting initial state).

Console.log in my render method will show me initial state at first rendering, on the second it will show correct data.

I need point where I'm sure that I have correct data.

...where var a = this.props.somethingFromState; will be assigned correctly.

Is render method best place and what is best practice for doing this in general. Thanks.

Answer 1

There are a couple of questions here.

With respect to where to load data, componentDidMount is indeed the correct place to call ajax methods and load data as suggested by the facebook docs.

In terms of whether or not to then pass that data down to child components via props, I like to follow Dan Abramov's (the author of redux) guid on presentational vs container components. In short, try to have a container component that loads your data and does all the logic, and then pass whatever is necessary down to presentational components via props, making them pure functions if possible.

In terms of when you will have the correct data, check the React lifecycle docs above. You will see that the constructor fires, then componentWillMount, then render, then componentDidMount. So if your ajax call gets the data in componentDidMount, you will have called render first, resulting in no data being loaded on the already mounted component. Most people solve this by putting a spinner until the data has finished loading from ajax. A simple if statement should accomplish this