So lets say a user has multiple tabs open, each would have a its own redux session (state). I am saving user's access token in Redux and Local Storage. Because I dont want to check Local Storage every time if the access token exists in Redux. But on Logout, it deletes from Local Storage and from the current Redux session. But if the user has multiple tabs open, the access token persisted in other tabs until refreshing the page. How can I remove something from all the Redux states in all the different tabs? So that if you logout from one tab, you will be logout from all.
Asked
Active
Viewed 1,524 times
2 Answers
3
You can use redux-state-sync https://github.com/AOHUA/redux-state-sync to fix this issue. This broadcasts event which will be caught by other tabs and state will remain same across tabs.
See the docs for more details.
Zohaib Ijaz
- 21,926
- 7
- 38
- 60
0
While redux-state-sync solves the problem by syncing the state in different tabs, I'd argue that using BroadcastChannel (see second answer here Communication between tabs or windows ) would be cleaner and simpler.
Ultimately you want to communicate with the other tabs solely by broadcasting a "log out now" message rather than keeping all the stores in sync.
It's not a redux-specific problem. The fact that you want to dispatch an action in the other tabs is just implementation detail, it could be anything else JS does.
timotgl
- 2,865
- 1
- 9
- 19
-
I think (if I understood this correctly) `redux-state-sync` is using `Broadcasr Channel`. https://github.com/AOHUA/redux-state-sync#broadcastchanneloption – Hafiz Temuri Oct 21 '19 at 17:15
-
@HafizTemuri Yes, what I meant was that it would be better to use it directly. – timotgl Oct 22 '19 at 15:18
-
Why and How can you use it with redux? I am new to this, and I am super confused about what you meant. – Hafiz Temuri Oct 22 '19 at 15:42
-
Plus the native `Broadcast Channel` only works with newer Chrome and Firefox. I will have to go find polyfills and stuff myself. – Hafiz Temuri Oct 22 '19 at 15:58