zustand-middleware-xstate

import create from "zustand"; import { setup } from "xstate"; import xstate from "zustand-middleware-xstate"; type UserEvents = { type: 'LOGIN' } | { type: 'LOGOUT' }; // Create your XState machine definition using setup const authMachine = setup({ types: { events: {} as UserEvents, context: {} as { userId: string | null } }, }).createMachine({ id: "auth", initial: "loggedOut", context: { userId: null }, states: { loggedOut: { on: { LOGIN: { target: "loggedIn", actions: ({ context }) => { // In a real app, you'd set the actual user ID context.userId = 'some-user-id-' + Math.random().toFixed(2); } } } }, loggedIn: { on: { LOGOUT: { target: "loggedOut", actions: ({ context }) => { context.userId = null; } } } } } }); // Create a Zustand store hook using the xstate middleware const useAuthStore = create( xstate(authMachine, { devTools: process.env.NODE_ENV === 'development' }) ); // Example usage in a component-like structure const AuthComponent = () => { const { state, send, actor } = useAuthStore(); console.log('Current Auth State:', state.value); console.log('User ID:', state.context.userId); return ( <div> <p>Authentication Status: {String(state.value)}</p> {state.matches('loggedOut') && ( <button onClick={() => send({ type: 'LOGIN' })}>Login</button> )} {state.matches('loggedIn') && ( <button onClick={() => send({ type: 'LOGOUT' })}>Logout</button> )} <p>Actor status: {actor.getSnapshot().status}</p> </div> ); }; // Simulate rendering AuthComponent(); // Initial render useAuthStore.getState().send({ type: 'LOGIN' }); // Simulate user login AuthComponent(); // Re-render after login useAuthStore.getState().send({ type: 'LOGOUT' }); // Simulate user logout AuthComponent(); // Re-render after logout