How to get updated data from localStorage / sync tabs?

[ShahriarKh]

How can I sync tabs while using persist (with localStorage)?

I've already checked the "shared-zustand", but since I'm using Immer, it doesn't work: Tom-Julux/shared-zustand#4.

Suppose I have a shopping cart. Currently, when I add something to it, the value in localStorage (say, items: 5) is updated correctly in every tab (which is definitely what I expect 🙂), but the value retrieved from the zustand store isn't, and each tab shows its initial value (say, one is items: 4, another is items: 5, ...).

I tried to solve this by watching for tab changes, and somehow "force-update" the state and make the component re-render.
Basically, my idea is to use:

let bears = useStore((state) => state.bears);

useEffect(() => {
    document.addEventListener("visibilitychange", getFreshDataFromStore)
    return () => {
        document.removeEventListener("visibilitychange", getFreshDataFromStore)
    }
}, []);

const getFreshDataFromStore = () => {
    // get updated "bears" from store, but hooks can't be used in functions
    // I want to do `bears = useStore((state) => state.bears);` again
}

However, I don't know how to get fresh data from the store.

I know I might be doing some kind of anti-pattern here, but I'm really confused and need help!

[dai-shi]

Hmm, I think BroadcastChannel is the right solution for syncing between tabs. If you want to refresh the store, you could use useState and put the result of createStore.

[ShahriarKh]

Reading the docs again, I finally made it work:

const updateStore = () => {
    useStoreName.persist.rehydrate();
};

useEffect(() => {
    document.addEventListener("visibilitychange", updateStore);
    window.addEventListener("focus", updateStore);
    return () => {
        document.removeEventListener("visibilitychange", updateStore);
        window.removeEventListener("focus", updateStore);
    };
}, []);

[jakehopking]

Thank you for sharing this!
I tried all of the zustand middleware packages to try to sync state tabs/windows etc (whilst also maintaining persist) and they all failed in various ways.
Your solution works flawlessly, with the added benefit of no additional deps!

[semanticist21]

You are the best bro

[mhsattarian]

Thank you for this answer, this gave me the main idea, but I prefer to use the storage event so the user doesn't face a flash in the UI when switching to a tab:

function updateCartStore(e: StorageEvent) {
  if (e.key === 'cart') {
    cartStore.persist.rehydrate();
  }
}

window.addEventListener('storage', updateCartStore);

[semanticist21]

Have you tested on it?
I tried in the same way, but it got in an infinite loop, as store rehydration incurred StorageEvent.

[mhsattarian]

@semanticist21 Yes, I'm using this in production and is working fine.

here is my code:

useEffect(() => {
    function updateCartStore(e: StorageEvent) {
      const { key } = e;
      if (key === 'cart') {
        cartStore.persist.rehydrate();
      }
    }

    window.addEventListener('storage', updateCartStore);

    return () => {
      window.removeEventListener('storage', updateCartStore);
    };
  }, []);