Zustand
Több state és logika kezelése
Összetettebb store-ok, nested state frissítés, több store-ra bontás és store-ok közötti kommunikáció.
Több state és logika kezelése
Több mező és action egy store-ban
import { create } from "zustand"
interface UserState {
name: string
email: string
isLoggedIn: boolean
setName: (name: string) => void
setEmail: (email: string) => void
login: () => void
logout: () => void
}
export const useUserStore = create<UserState>((set) => ({
name: "",
email: "",
isLoggedIn: false,
setName: (name) => set({ name }),
setEmail: (email) => set({ email }),
login: () => set({ isLoggedIn: true }),
logout: () => set({ isLoggedIn: false, name: "", email: "" }),
}))Beágyazott state frissítése (spread)
interface ProfileState {
user: { name: string; avatar: string }
updateName: (name: string) => void
}
export const useProfileStore = create<ProfileState>((set) => ({
user: { name: "Vendég", avatar: "/default-avatar.png" },
updateName: (name) =>
set((state) => ({
user: {
...state.user,
name,
},
})),
}))Logika szétválasztása – több store
useAuthStore, useCartStore, useUIStoreStore-ok közötti kommunikáció
export const useCartStore = create((set) => ({
items: [],
checkout: () => {
const { isLoggedIn } = useAuthStore.getState()
if (!isLoggedIn) return
set({ items: [] })
},
}))