Learning
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, useUIStore

Store-ok közötti kommunikáció

export const useCartStore = create((set) => ({
  items: [],
  checkout: () => {
    const { isLoggedIn } = useAuthStore.getState()
    if (!isLoggedIn) return
    set({ items: [] })
  },
}))

On this page