1

I have been using react-router-redux which allows for my location to be stored in state nicely, and allows me to use react-router for defining routes, and linking between routes.

One problem seems to be that when I need to navigate using a <Link /> component like so:

<Link to={`/movie/${m.id}`}>
    <p>{m.name}</p>
</Link>

this will trigger the change of route, and on load of the new route, in this case the <Movie /> route, the state for the movie page is loaded.

This doesn't really work nicely for transition between pages, as the new page will be blank on navigation, or you can put in a loader but really it should not navigate to the new page until the api call for the new page has loaded. Similar to sites like pitchfork.com or theguardian.com

This implementation has been discussed in this question and the approach of just using a loader between page transitions is used in the real-world-example and reddit api example

My question is, if I want to load state for the new container/route in my site before navigating, do I need to follow the approach suggested by dax chen in this question?

To sum up the answer was to fire an action and using redux-thunk we can preload the state by calling the action for the new container/route, then on completion we navigate to the page using react-router-redux's push() action

store.dispatch(push('/foo'))

If this is the recommended approach for preloading a page before transition, then I will be changing my react-router-redux-example and my current site to use this approach.

An action to load the new route's data then navigate will look something like this:

function fetchInit(url, id, to) {
  return dispatch => {
    return dispatch(fetchMovie(url, id))
      .then(function(home) {
        return dispatch(push(to))
      })
  }
}

It will need some logic to identify the new container's action to call and also the new path to navigate to. It may call the static fetchData() method on the new page's container component.

So this will somewhat complicate the <Link /> component, I am just looking for some advice on if this is the correct way, or I may have missed a simpler more recommended approach.

<Link onClick={ () => dispatch(navigate(`/movie/${m.id}`, 'Movie')) } >
    <p>{m.name}</p>
</Link>
Community
  • 1
  • 1
svnm
  • 22,878
  • 21
  • 90
  • 105

1 Answers1

0

I made an implementation that solves this, and it is possible to make any type of custom link component and have it act in any way you like, however it is probably not a good idea for it to wait for a long load event before changing to a route, as users want the route transition to be immediate. The better approach is to use a nice loader and mix it in to the design of your page well, similar to what is done on pitchfork.com and also to ensure data comes back from the API quickly using caching e.g. redis, memcached.

Here is the library I made showing a custom react-router-redux link component: https://github.com/StevenIseki/react-router-redux-link

svnm
  • 22,878
  • 21
  • 90
  • 105
  • A good use case for what you don't think is a good idea: Page for a resource has button to delete resource. I want to navigate some other place _only after_ resource is deleted, but if the delete fails I don't want to navigate. This requires the ability to say "make delete call, wait till it's done, check what happened, navigate accordingly" – Joseph Fraley Jan 20 '17 at 20:07