Zustand Relay Client

import {relay} from "@j5/zustand-relay-client";
import {useEffect} from "react";

/** The client's view of the server state */
export type RemoteState = Partial<{
  count: number;
  messages: string[];
}>;

type RemoteActions = {
  increment: () => void;
}

const {
  client, // can be used to directly talk to the remote server
  store, // can be used to access local zustand store outside of useRemoteState
  subscribe,
  useRemoteState,
  remoteApi,
} = relay<RemoteState, RemoteActions>({
  defaultState: {},
  wsUrl: `ws://localhost:8080/join`,
});

export default function App() {
  // somewhere in your app, you need to call subscribe 
  useEffect(() => {
    return subscribe();
  }, []);

  return <>
    <Counter/>
  </>;
}

function Counter() {
  // this will re-render whenever the server count changes
  const count = useRemoteState(s => s.count);

  return <div className='flex gap-2'>
    Count: {count}
    <button onClick={() => {
      remoteApi.increment();
      // note: the above is equivalent to:
      // remoteStateClient.sendMessage({ type: "increment" });
    }}>
      Increment
    </button>
  </div>;
}