Sync datas between multiple tabs

[ithilbor]

Hi i was wondering if some one can help me at explain me ho to sync datas in a store between multiple tabs, preferably with an example.
Thanks in advance!

[hexwit]

You just need to search the internet about that. There are multiple possibilities for communication.
And none of them directly relates to the zustand. So I believe that your question is out of scope.

[ithilbor]

So the function onRehydrateStorage: () => (state) => {...} it has nothing to do with sync the stat between tabs, i need to look at something like Broadcast channel or other libs, correct?

[dai-shi]

Just searched for "zustand broadcast channel" and found https://github.com/Tom-Julux/shared-zustand.

[ithilbor]

Yep, i foudn that too yesterday but as I read in the docs it's in a very primordial state but it can be useful as an example an take some inspiration to do something better, thanks @dai-shi, may be i can start thinking o writing some code to integrate to zustand in order to let users do this kind of things without do that from scratch, what do you think?

[raburuz]

This comment is too late, but I found this repo use-broadcast. It is a middleware for Zustand. Is so simple and easy to use, I tried with my current project and I really shocked

I used it with my authentication to persist user data and sync multiple browser tabs.

Usage:

  import { create } from 'zustand';
  import { shared } from 'use-broadcast-ts';
  
  const authStore = create<IAuthStore> (
    shared(persist( 
      (set) => ({
        account: null,
        setAccount: ( value ) => set( state => ({...state, account: value }) , true ),
        isLoading: false,
        setIsLoading: (value) => set( state => ({ ...state, isLoading: value }), true ),
      }),
      {
        name: "localStorageKeyword",
        storage: createJSONStorage(() => localStorage),
      }
    ),{ name: "BroadcastKeyword"})
  )
  
  /*the rest of your code.....*/

Here example

[harish-github35]

@raburuz thanks

[mamlzy]

thanks @raburuz it works!

[sijirama]

1 year later and it still works, love you

[ValkyrieWing]

be careful with using use-broadcast-ts
it has bug on multi tab that the new tab opened is first hydrating the old state and is always first hydrating that same old state.
give me headache to trace for hours for my JWT refreshtoken rotation and the issue was it was giving the old state
use-broadcast-ts report issue

instead implement your own rehydrate with storage event listener is easy and less abstraction.
just like Hexwit accepted answer

[dberardo-com]

does anyone know if there is a ready-to-use library to achieve client-side state synchronization using Zustand and Websockets ?

on the lines of https://blog.armanddu.com/real-time-app-with-react-and-web-sockets-part-2/

[ahmadghoniem]

#1614 (comment)
This is a really nice answer IMO instead of using additional dependencies

[alimertcakar]

It's actually easy to write a middleware for this:

Middleware:

const sync =
  <T extends object>(
    stateCreator: StateCreator<T>,
    options = {} as SyncOptions
  ): StateCreator<T> =>
  (set, get, api) => {
    const { enabled, name } = options;

    const shouldSync = enabled && globalThis?.localStorage;
    if (shouldSync) {
      window.addEventListener("storage", (e) => {
        const isStoreUpdate = e.key === name;
        if (!isStoreUpdate) return;

        const currentState = get() as Record<string, unknown>;
        const newState = safeParseJSON(e.newValue)?.state;

        const hasShallowUpdate = Object.keys(newState).some((key) => {
          return newState[key] !== currentState[key];
        });

        if (!hasShallowUpdate) return;
        set(newState);
      });
    }

    return stateCreator(set, get, api);
  };

function safeParseJSON(jsonStr){
  try {
    return JSON.parse(jsonStr);
  } catch (e) {
    return {};
  }
}

Usage:

const useStore = create(
  persist(
    sync(
      (set) => ({
        // ...your slices
      }),
      {name: persistOptions.name}
    ),
    persistOptions
  )
);

I've also made this into a npm package here: (zero dependencies)
https://www.npmjs.com/package/zustand-sync-middleware

Usage:

import sync from "zustand-sync-middleware"; 
// usage same as above

Demo: https://zustand-sync.netlify.app/
Codesandbox: https://codesandbox.io/p/sandbox/zustand-sync-zk5dvg

[alimertcakar]

I have to mention, there is also this library which I was inspired but it does not work for zustand@latest unfortunately. Also I don't think reimplementing zustand/persist is a good idea as that library did, the middleware above is simpler and better.

[amio]

This answer should be the chosen one. Thanks! @alimertcakar

[amio]

Here's my approach, intercept set() method and broadcast with BroadcastChannel.
It enables a one-liner usage, and announces just the changed part.

/**
 * Wraps a Zustand set function to sync state across windows using BroadcastChannel.
 * @param set The original Zustand set function
 * @param channelName The BroadcastChannel name
 * @returns The wrapped set function
 */
export function syncSet<T extends object>(set: (updater: T | ((state: T) => T)) => void, channelName: string): typeof set {
  const syncChannel = new BroadcastChannel(channelName)

  // Listen for messages from other windows to update the store state
  syncChannel.onmessage = (event) => set(event.data)

  // Return a new set function that broadcasts state changes
  return (updater) => {
    if (typeof updater === 'function') {
      set((oldState: T) => {
        const newState = updater(oldState)
        const serializableState = filterSerializableState(newState)
        syncChannel.postMessage(serializableState)
        return newState
      })
    } else {
      set(updater)
      const serializableState = filterSerializableState(updater)
      syncChannel.postMessage(serializableState)
    }
  }
}

/**
 * Filters out non-serializable properties from an object for BroadcastChannel transmission
 */
function filterSerializableState<T extends object>(state: T): Partial<T> {
  const filtered = {} as Partial<T>

  for (const [key, value] of Object.entries(state)) {
    // Skip AbortController and other non-serializable objects. You may update this to fit your usage.
    if (value instanceof AbortController) continue
    if (typeof value === 'function') continue
    if (value === undefined) continue

    filtered[key as keyof T] = value
  }

  return filtered
}

usage:

 const useStore = create(
   persist(
     (set) => {
+        set = syncSet(set, 'preference-store-broadcast-channel')
         return { /* ... */ }
     },
     persistOptions
   )
 );