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.
2 Answers
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.
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.
Related