How can we use the same state across multiple tabs (pages)?

Question

I have a page in my application that is an interactive chart with a bunch of settings (filters, time ranges, etc). I'd like to store them in-app state because some of the settings may be used by other components on another page, but right now if I click on any other tab and come back to the previous tab then the page shows the initial state(chart is gone, filtered data gone, date range showing the default value, dropdowns shows default ass well). And the state is also showing null.

Answer 1

Anything in your component state is dynamic; i.e., it is temporary. If you refresh the window, the old state is lost. A similar thing happens when you open a fresh tab—you get the state declared in your constructor. You can use any of the following if you want the state data in another tab:

1. Simply using redux won't solve your problem as redux store is also related to a specific browser tab. If you would like to persist your redux state across a browser refresh, it's best to do this using redux middleware. Check out the redux-persist, redux-storage middleware.

2. If you are using react-router you can simply pass required state through the link when you open a fresh tab. Here's an example:

<Link to={{ 
  pathname: '/pathname', 
  state: { message: 'hello, im a passed message!' } 
}}/>

3. Simply store the data in localStorage and access localStorage in other tabs.