Sync datas between multiple tabs

[IronCub3]

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.

[IronCub3]

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.

[IronCub3]

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?

[IronCub3]

Perfectly get it, now a days i'm getting into this topic and I will produce some code in order to do this, maybe I will send you some docs about this topic to post it in order to simplify the life of other programmers. Thanks again and have a nice day @dai-shi! ;)

[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

[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