‏XState Store: مدیریت حالت ساده با رویداد

XState Store که با @xstate/store نصب می‌شه، یه کتابخونه‌ی کوچیک برای مدیریت حالت ساده توی اپ‌های JavaScript و TypeScript‌ـه. ایده‌ی اصلیش به‌روزرسانی داده‌ی store با رویدادها (events) هست و توی همون لیگ کتابخونه‌هایی مثل Zustand، Redux و Pinia قرار می‌گیره. اگه نیازت پیچیده‌تر شد، نویسنده‌ها می‌گن سراغ خود XState برو یا این دو رو با هم ترکیب کن. این نسخه به TypeScript ۵.۴ به بالا نیاز داره.

هسته‌ی کار store هست. با تابع createStore(...) و یه آبجکت کانفیگ می‌سازیش که شامل context اولیه و یه آبجکت on برای transitionهاست؛ توی on، کلیدها نوع رویدادن و مقدارها توابعی که context رو به‌روز می‌کنن. موقع به‌روزرسانی باید کل آبجکت context رو با همه‌ی فیلدهاش برگردونی. با store.trigger.*(...) رویدادهای تایپ‌دار به store می‌فرستی و با store.can هم می‌تونی بدون تغییر دادن store چک کنی که یه رویداد مجازه یا نه.

یکی از تازگی‌های نسخه‌ی ۴ پشتیبانی از Standard Schema هست. اسکیماها قرارداد قابل‌خواندن در زمان اجرای store رو تعریف می‌کنن: شکل context، payload رویدادهای ورودی و رویدادهای emit‌شده. به‌صورت پیش‌فرض فقط برای استنتاج تایپ و متادیتا استفاده می‌شن و مقادیر رو اعتبارسنجی نمی‌کنن، مگر این‌که با validateSchemas() صریحاً وارد عمل بشی؛ اون موقع رویداد ورودی، context نهایی و رویدادهای emit‌شده اعتبارسنجی می‌شن.

برای کنترل جریان، effects رو می‌شه داخل transitionها با آرگومان enqueue صف کرد. ولی یه قاعده‌ی مهم هست: این effectها باید به‌صورت همگام (synchronous) داخل تابع transition صدا زده بشن؛ صدا زدنشون توی یه callback آسنکرون یا Promise بی‌اثره. دلیلش هم تضمین قطعی بودن (determinism) سیستمه — همه‌ی تغییرات باید نتیجه‌ی مستقیم یه رویداد باشن. برای کارهای آسنکرون باید یه رویداد دیگه به store بفرستی.

بخش‌های کاربردی دیگه‌ای هم داره. سلکتورها با store.select(selector) بهت اجازه می‌دن فقط به یه تیکه از state مشترک بشی و فقط وقتی همون مقدار عوض شد به‌روزرسانی بگیری، با امکان تعریف تابع برابری دلخواه. اتم‌ها (atoms) هم تیکه‌های سبک و واکنش‌گرای state هستن برای داده‌های ساده، مستقل یا مشتق‌شده — با createAtom، atom.get()، atom.set() و امکان ساختن اتم‌های مشتق و آسنکرون. حتی نسخه‌ی pure با store.transition(state, event) برای تست و دیباگ هم وجود داره و می‌شه از Immer برای به‌روزرسانی context استفاده کرد.

از نظر یکپارچگی، برای هر فریم‌ورک یه پکیج مجزا داره مثل @xstate/store-react، @xstate/store-vue، -svelte، -solid و -angular (توی نسخه‌ی ۴ دیگه import از مسیرهای فرعی مثل @xstate/store/react پشتیبانی نمی‌شه). افزونه‌ها هم با .with(...) اضافه می‌شن، مثل undo/redo، persist برای ذخیره و بازیابی از storage، و reset. در نهایت چون storeها خیلی شبیه actorهای XState‌ان، با تغییر یه خط از createStore به fromStore می‌تونی به منطق سازگار با XState ارتقا بدی.

نکات کلیدی:

• @xstate/store یه کتابخونه‌ی سبک مدیریت حالت با رویداده، رقیب Zustand و Redux
• store با context اولیه و آبجکت on برای transitionها ساخته می‌شه
• نسخه‌ی ۴ از Standard Schema پشتیبانی می‌کنه ولی اعتبارسنجی اختیاریه
• effectها باید همگام داخل transition صدا زده بشن تا قطعیت حفظ شه
• سلکتورها، اتم‌ها، Immer و افزونه‌هایی مثل undo/redo و persist رو هم داره