در این الگو، Zustand را برای مدیریت حالت سمت کلاینت یکپارچه کرده‌ایم. Zustand یک راه حل مدیریت حالت کوچک، سریع، و مقیاس‌پذیر است که به شما اجازه می‌دهد تا حالت‌های компонنت‌های سمت کلاینت خود را به شیوه‌ای ساده و کارآمد مدیریت کنید.

ما از Zustand برای مدیریت برخی از حالت‌های هسته‌ای در دمو استفاده می‌کنیم، اما کاملاً اختیاری است که شما در پروژه‌های خود از آن استفاده کنید. اگر ترجیح می‌دهید از کتابخانه مدیریت حالت دیگری یا حتی حالت داخلی ری‌اکت استفاده کنید، می‌توانید به راحتی به آنچه که بیشترین نیاز شما را برآورده می‌کند، تغییر دهید.

import create from 'zustand'

type CouterState = {
    count: number
}

type CouterAction = {
    increaseCount: () => void
    decreaseCount: () => void
}

// فروشگاه را تعریف کنید
const useCounterStore = create<CouterState & CouterAction>((set) => ({
    count: 0,
    increaseCount: () => set((state) => ({ count: state.count + 1 })),
    decreaseCount: () => set((state) => ({ count: state.count - 1 })),
}))

export default useCounterStore

import useCounterStore from './path/to/store'

const Counter = () => {
    const { count, increaseCount, decreaseCount } = useCounterStore()

    return (
        <div>
            <h1>شمارنده: {count}</h1>
            <button onClick={increaseCount}>افزایش</button>
            <button onClick={decreaseCount}>کاهش</button>
        </div>
    )
}

export default Counter

این فقط یک مثال پایه‌ای است تا شما را شروع کند. Zustand انعطاف‌پذیر است و می‌تواند برای سناریوهای مدیریت حالت پیچیده‌تر به medida که برنامه شما رشد می‌کند، استفاده شود. اگر می‌خواهید استفاده پیشرفته‌تر را کشف کنید، ما توصیه می‌کنیم که مستندات رسمی Zustandرا بررسی کنید.