Correct way to load data based on router params?

[jisaacks]

I am having a hard time wrapping my head around the correct way to load data based on route params.

Say there is a route like /messages/:id that renders a <Message/> component.

Getting that message component to render based on the route and recieve the correct id via this.props.params.id is trivial and explained well in the docs.

However, what if I actually need to asynchronously load data for that message based on the id? I am not seeing any docs that describe how to do this.

I could make an ajax request inside the componentWillMount or componentWillReceiveProps method, and manage the loaded data using the component's state. Aside from this feeling ugly, the loaded message data is not stored within redux's state.

All my attempts lead to infinite rendering loops. I know I was warned about that problem in issue #205 and I am not trying to argue anymore. Just trying to understand the correct way this is supposed to be done.

Is there a specific piece of documentation or example I could look at. Is the fetched/asynchronous data not supposed to be in redux and just kept in the component's state?

[timdorr]

Take a look at async-props and keep track of remix-run/react-router#2638