0

I am using redux to store my state. It works properly when i navigate to the same page (multiple components but on a single page). But when I open in a link in new tab/window, the state becomes undefined.

Based on findings, the redux state is expected to reset when refreshing a page or opening in new tab/window. What I then thought of is to pass store.getState() as a param when navigating to another component so that if the component sees that the state is undefined, it will access its props state (passed on by the previous component).

Now, when a link is opened in new tab, I need to pass the state. I am using react-router for navigation. Currently, the state is passed onto other page when I just click on the link. But when I open the link in new window/tab, the state, again, becomes undefined. I'm using this to navigate to the specified link:

<Link to={link}>{value}</Link>

where link is a const containing the pathname and state(store.getState()) I need to pass.

I have found many similar stackoverflow questions[e.g. programmatically-navigate-using-react-router]. I've tried using 

<a onClick={history.push(link)}>

but it doesn't seem to work. Maybe I'm using it the wrong way. The other ones I just can't figure out how to use/implement in this context.

Please give sample code snippets aside from just explaining. I'm quite a beginner in redux/react.

Thanks!

shacy
  • 41
  • 1
  • 2
  • 8
  • 1
    Came across this npm package which syncs redux state between different tabs. Not sure if this is your requirement, but pasting it in case: [redux-state-sync](https://www.npmjs.com/package/redux-state-sync). Need to be mindful before syncing state between multiple tabs though, might cause unwanted side effects. – A.I Sep 13 '19 at 12:16

1 Answers1

-1

The first thing that you should check is that you are using the correct version of React-Router. I am unsure if that approach will work in anything besides V4.

If you are indeed using React-Router V4 and it still doesn't work. Another cleaner approach you can take that will save the state not only after redirects to new tabs/windows but also after refreshes, is to save the state of your application in the local storage.

This video by Dan Abramov explains how to do it.

Gabriel
  • 19
  • 3