Redux-saga preload data on route change

Question

I want to load a set of data from an api using redux-saga but I can't find an example of how to do this when navigating to a new route (eg /posts) before rendering the route.

How would I do this?

Answer 1

You can use the onEnter prop on Route:

<Route path='posts' onEnter={() => store.dispatch({ type: 'FETCH_POSTS' })} />

In this case, you can't use the store in the context of the tree that is inserted in Provider. You'd have to import it and use directly.

Another option is instead of passing a component prop, pass a getComponent:

<Route path='posts' getComponent={(nextState, cb) => {
  store.dispatch({ type: 'FETCH_POSTS' });
  cb(null, PostList);
}} />

I can't tell what are the pros/cons for any of those approaches though since I've never used them. I just tried to find a solution that could work for your use case.

Answer 2

Just add a call to fetch data when the new component mounts. For this to work you need to write the component so that it can at least partially render with incomplete data.