درک Zustand

مدیریت وضعیت (State management) اغلب بسیار پیچیده به نظر می‌رسد.

شما می‌دانید چگونه از useState در React استفاده کنید. می‌دانید چگونه props را پاس دهید. می‌دانید چگونه وضعیت را به بالا منتقل کنید (lift state up).

اما وقتی اپلیکیشن شما بزرگ می‌شود، همه چیز به هم می‌ریزد. شروع می‌کنید به پاس دادن داده‌ها از طریق کامپوننت‌هایی که به آن‌ها نیازی ندارند. این همان prop drilling است. این کار کد شما را کثیف و نگهداری آن را دشوار می‌کند.

Zustand این مشکل را حل می‌کند. این کتابخانه یک وضعیت مشترک (shared state) خارج از کامپوننت‌های React به اپلیکیشن شما می‌دهد.

این‌طور به آن نگاه کنید:

بدون Zustand: کامپوننت A پروپ‌ها را به B، B پروپ‌ها را به C و C پروپ‌ها را به D پاس می‌دهد.

با Zustand: هر کامپوننت مستقیماً با یک استور مرکزی (central store) صحبت می‌کند. بدون واسطه. بدون prop drilling.

یک استور Zustand از دو بخش تشکیل شده است:

  • State: داده‌های شما.
  • Actions: توابعی که داده‌های شما را تغییر می‌دهند.

کل ماجرا همین است.

Zustand سریع است زیرا فقط کامپوننت‌هایی را که از داده‌های تغییریافته‌ی خاص استفاده می‌کنند، دوباره رندر (re-render) می‌کند.

اگر می‌خواهید داده‌های شما با رفرش شدن صفحه باقی بمانند، از localStorage استفاده کنید. از آنجایی که localStorage فقط رشته‌ها (strings) را ذخیره می‌کند، باید برای ذخیره اشیاء (objects) از JSON.stringify و برای خواندن آن‌ها از JSON.parse استفاده کنید.

در اینجا یک روش ساده برای ساختاردهی به یک auth store آورده شده است:

  • کاربر و توکن را در localStorage ذخیره کنید.
  • از یک تابع login برای به‌روزرسانی استور و حافظه مرورگر استفاده کنید.
  • از یک تابع logout برای پاک کردن هر دو استفاده کنید.

مقایسه آن با Redux چگونه است؟

Redux به dispatcherها و reducerها نیاز دارد. این کار شامل مقدار زیادی کد تکراری (boilerplate) است. Zustand به شما اجازه می‌دهد یک تابع را مستقیماً فراخوانی کنید. این کتابخانه بار ذهنی (mental overhead) کمتر و تنظیمات کمتری دارد.

اشتباهات رایجی که باید از آن‌ها دوری کرد:

  • فراموش کردن بازگرداندن (return) یک شیء در تابع create. از پرانتز دور شیء خود استفاده کنید.
  • استفاده از نقطه-ویرگول (semicolon) در داخل شیء state. به جای آن از کاما استفاده کنید.
  • پارس کردن داده‌هایی که از قبل رشته هستند.

کتابخانه‌های مدیریت وضعیت، برای مدیریت وضعیت نیستند، بلکه برای مدیریت پیچیدگی هستند.

از تلاش برای حفظ کردن تمام APIها دست بردارید. شروع کنید به نگاه کردن به مشکلی که آن ابزار سعی در حل آن دارد. وقتی مشکل را درک کنید، استفاده از ابزار منطقی خواهد بود.

منبع: https://dev.to/chinwuba_jeffrey/understanding-zustand-2g11