‏Dotzee: مدیریت state به سبک Pinia برای React

Dotzee یه کتابخونهٔ مدیریت state برای React هست که با TypeScript نوشته شده و به گفتهٔ سازنده‌ش، تجربهٔ کار با Pinia (کتابخونهٔ رسمی مدیریت state تو Vue) رو به React میاره. هدفش اینه که هم state سراسری و هم state محلی رو با یه API ساده و خوانا مدیریت کنی.

storeها رو دو جوری می‌شه تعریف کرد. تو حالت Options API یه آبجکت می‌دی که سه بخش state، getters و actions داره. getterها مقدارهای مشتق‌شده‌ان (یعنی از روی state حساب می‌شن و خودشون آپدیت می‌شن) و actionها منطق برنامه و تغییر state رو نگه می‌دارن، چه همزمان چه async:

export const useCounterOptionsStore = defineDotzeeStore('counterOptions', {
  state: () => ({ count: 0 }),
  getters: {
    doubleCount: (state) => state.count * 2,
  },
  actions: {
    increment() { this.count++; },
  },
});

حالت دوم Setup API هست که شبیه Composition API تو Vue کار می‌کنه. اینجا store یه تابعه که با ref() مقدار reactive می‌سازی و با computed() مقدار مشتق‌شده، بعد هر چی لازمه رو return می‌کنی. فقط حواست باشه تو این حالت باید از .value استفاده کنی، مثلاً store.count.value. تو کامپوننت هم کافیه هوک store رو صدا بزنی و مستقیم از مقدارها و actionها استفاده کنی.

زیر کار، یه سیستم reactivity مبتنی بر Proxy هست، یعنی کتابخونه دسترسی‌ها به state رو ردیابی می‌کنه و فقط بخش‌هایی رو آپدیت می‌کنه که واقعاً تغییر کردن. Dotzee به افزونهٔ Redux DevTools وصل می‌شه و می‌تونی actionها رو دنبال کنی و time-travel debugging داشته باشی. از SSR هم پشتیبانی می‌کنه، یعنی state رو می‌شه روی سرور serialize کرد و تو مرورگر دوباره بالا آورد. یه سیستم پلاگین هم برای گسترش قابلیت‌ها داره.

نکات کلیدی:

• دو روش تعریف store: Options API و Setup API
• reactivity مبتنی بر Proxy با primitiveهای ref() و computed()
• تو Setup store باید از .value استفاده کرد
• اتصال به Redux DevTools با enableDotzeeDevTools
• پشتیبانی از SSR، سیستم پلاگین و type inference کامل TypeScript
• لایسنس MIT، نصب با npm install dotzee