import devtools, persist from 'zustand/middleware' const useStore = create( devtools( persist( (set) => ( /* state */ ), name: 'app-storage' ) ) ) const useStore = create((set, get) => ( user: null, loading: false, fetchUser: async (id) => set( loading: true ) const response = await fetch(`/api/user/$id`) const user = await response.json() set( user, loading: false ) , )) 4. Accessing Store Outside React // In a utility function or plain JS module import useStore from './store' // Get current state const currentState = useStore.getState()
) ) Issue: LocalStorage or session is not available on the server.
// Example: Only persist on client side const useStore = create( persist( (set) => ( /* state */ ), name: 'my-store', getStorage: () => if (typeof window !== 'undefined') return localStorage return dummyStorage , ) ) 1. Splitting Stores Avoid one giant store. Split by domain. zust2help
// reducer, actions, constants, etc. const mapState = (state) => ( count: state.counter.count ) const mapDispatch = increment, decrement
Use persist with a skipHydration option or conditionally access storage. Splitting Stores Avoid one giant store
interface BearState bears: number addBear: () => void eatFish: () => void
const useStore = create((set) => ( count: 0, increment: () => set((state) => ( count: state.count + 1 )), decrement: () => set((state) => ( count: state.count - 1 )), )) Using Redux DevTools Wrap your store with devtools() : const mapState = (state) => ( count: state
name: 'user-storage', // unique key in localStorage getStorage: () => localStorage, // or sessionStorage