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"

As much I understand, you are opening a new browser tab. I don't think two tabs can share/have same state. Infact, browser tabs don't share data. — Umang Gupta
– Umang Gupta, Commented Jan 19, 2017 at 15:19
Yes 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. — Gorakh Nath
– Gorakh Nath, Commented Jan 19, 2017 at 15:25
I dont think that is possible. Redux state cant be shared across browser tabs — Umang Gupta
– Umang Gupta, Commented Jan 19, 2017 at 15:27
You don't have explicit control over browser tabs. You can however manipulate your URL so that your component would load different data accordingly. — xiaofan2406
– xiaofan2406, Commented Jan 20, 2017 at 0:21

Vivek Tikar · Accepted Answer · 2018-02-21 06:19:27Z

2

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.

answered Feb 21, 2018 at 6:19

Vivek Tikar

4883 silver badges14 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

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

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related