0

I could use some advice on React, Redux and routing. I've been playing with react-router-redux and redux-little-router. Neither seems to give an out-of-the-box solution for restoring route state. I'll explain:

Suppose I have an app that has a product page. The product page shows related products. The user can click on a related product and see its product page. From that product page they can click on another related product, etc.

What I wind up with is a pile of pages pushed on to the route "stack", all with the same path. When the user clicks back I need to traverse them through the product pages, each with the appropriate state restored.

My question is: where do I store the bits of state for each product page. I can't see how the major frameworks provide a mechanism for this. Do I have to write my own?

Cave Johnson
  • 6,499
  • 5
  • 38
  • 57
motormal
  • 158
  • 1
  • 11

1 Answers1

0

You should not attempt to store any stack / history. You should store the required data to show the page, like product ID, in the URL. In your route or component you should load the appropriate data from AJAX and stores based on the ID from the URL.

You can fetch the data in the onEnter callback: https://stackoverflow.com/a/32922945/743464

Or you can use a library like async-props or redux-async-connect to fetch the data, which will be called when your component mounts in response to a route change.

Community
  • 1
  • 1
Andy Ray
  • 30,372
  • 14
  • 101
  • 138
  • Thanks for a solid response Andy. What about things like scroll position - where would I store those bits of state? – motormal Dec 10 '16 at 13:06
  • I haven't personally used it but https://github.com/taion/react-router-scroll might do the job for you – Andy Ray Dec 11 '16 at 02:38