2

I am building a web app using React (15.3.0), Redux (3.5.2) and react-router (2.6.1). I include the versions as I've seen a few related posts but they reference old versions of these libraries.

I have some state that I would like to persist on the URL so that the user can deep link to it. By deep linking, I mean that a user can link directly to a state of a page. I have various pages in my app, each page has a separate reducer, the state for each page should persist between pages.

I've read Dan Abramov's recommended approach: How to sync Redux state and url hash tag params Which seems ok, apart from persisting state between pages.

An example scenario:

  1. User lands on page one: /page1

  2. User interacts with the page causing state to be saved in the URL: /page1?state={...}

  3. User goes to page 2: /page2

  4. User interacts with page 2: /page2?state={...}

  5. User links to page 1, expecting to see that page as they left it. Problem! How do we recover the state from page 1?

I've looked at react-router-redux, but I can't tell if it does what I need it to?

Is there a common approach to this problem? If so what is it? If not, can you suggest an approach?

Community
  • 1
  • 1
David Normington
  • 801
  • 8
  • 15

1 Answers1

2

I'm sure there is more than one answer to this; you just need to pick one and implement it.

If it were me, I would do this:

  1. Use the redux store as the single source of truth for state
  2. Subscribe to the store in some way (perhaps a redux middleware) and update the url params when the relevant state for page1 changes
  3. If a user visits /page1, use the stored state (I'm assuming state will need to be synced to a server to be able to store/recover it).
  4. If a user visits /page1?state={...}, either a) merge the URL state into the stored/recovered state or b) skip recovering and use the URL directly.

I would even go further and NOT sync the state to the url, since that seems like wasted effort (unless users are relying on bookmarking a page). Just render a React component saying "Share this URL" and have it render a URL with proper query params.

Devin Howard
  • 635
  • 1
  • 6
  • 15
  • That's the solution I ended up with as well apart from I used `store.subscribe` instead of a middleware and did sync the store with url. Thanks! – David Normington Aug 19 '16 at 12:23