How to handle separate state for each browser tab in reactjs?

Question

We are opening new window tab which contains the userList based on the selected userId from a list. I open the new window like this:

this.props.getVisitDetails(this.props.userId)
var win = window.open('./requisition','_blank');
win.onload = function() { this.document.title = windowTittle; }
win.focus();
this.state.oldWindow.push(win);

Here I am getting userId from the Redux store. The problem is that if I am opening more than one window tab then userId on every window tab will have the same userId and when you will click refresh then all window tabs will have the same data. So my question is how can I maintain a separate state for each window tab?

Note: all browser tab all sharing same stored state that we saved using createstore method,so in my case visitid will be updated on every row click which will open browser's new tab. This is how the data is "shared"

Answer 1

Your store is not shared across multiple tabs, So every time you open new tab your whole application gets loaded again along with initialization of fresh store. So, In your case simple solution will be to open new tab with URL containing userId as query param(window.open('./requisition?userId=${userId}','_blank');). Such that you will be able to maintain separate userId in different browser tabs.