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

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 link when you open an fresh tab. here's a 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.

hope it helps :)