CODEWITHSUNDEEP
reactjsreact-redux
Gorakh Nath
Gorakh Nath

Reputation: 9838

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

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"

Upvotes: 7

Views: 4318

Answers (1)

Vivek Tikar
Vivek Tikar

Reputation: 478

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.

Upvotes: 2

Related Questions