مقدمه

مدیریت state یکی از چالش‌های رایج در پروژه‌های ری‌اکت است. Zustand یکی از کتابخانه‌های سبک، ساده و در عین حال قدرتمند برای مدیریت state است که توسط Poimandres توسعه یافته و بدون نیاز به boilerplate زیاد، امکان مدیریت global state را فراهم می‌کند.

چرا Zustand؟

Zustand برخلاف Redux یا Context API:

  • نیاز به provider ندارد
  • پرفورمنس بالایی دارد
  • ساده و خواناست
  • از hooks به‌خوبی استفاده می‌کند

نصب Zustand

برای شروع کافی است آن را نصب کنید:

npm install zustand

ساخت اولین Store

در ادامه یک مثال ساده از ساخت Store با Zustand را می‌بینید:

import { create } from 'zustand';

const useStore = create((set) => ({
  count: 0,
  increment: () => set((state) => ({ count: state.count + 1 }))
}));

استفاده در کامپوننت

function Counter() {
  const { count, increment } = useStore();
  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={increment}>افزایش</button>
    </div>
  );
}

ساختار بهتر برای پروژه‌های بزرگ

برای مقیاس‌پذیری، می‌توانید استورها را به فایل‌های جداگانه منتقل کنید:

store/counter.js

import { create } from 'zustand';

const useCounterStore = create((set) => ({
  count: 0,
  increment: () => set((state) => ({ count: state.count + 1 }))
}));

export default useCounterStore;

مقایسه با Redux و Context

ویژگی Zustand Redux Context API
نیاز به Provider ❌ ✅ ✅
Boilerplate کم ✅ ❌ ✅
عملکرد بالا ✅ ✅ ❌
یادگیری ساده ✅ ❌ ✅
---

نتیجه‌گیری

Zustand گزینه‌ای عالی برای پروژه‌هایی است که نیاز به مدیریت ساده اما قدرتمند state دارند. اگر به دنبال راه‌حلی سریع، خوانا و بدون پیچیدگی برای مدیریت state در ری‌اکت هستید، Zustand را حتماً امتحان کنید.