فهم Zustand

غالبًا ما تبدو إدارة الحالة (State management) معقدة للغاية.

أنت تعرف كيفية استخدام useState في React. وتعرف كيفية تمرير الـ props. وتعرف كيفية رفع الحالة (lift state up).

ولكن كل شيء ينهار عندما يكبر تطبيقك. تبدأ في تمرير البيانات عبر مكونات لا تحتاج إليها. هذا ما يسمى بـ "prop drilling"، وهو ما يجعل الكود الخاص بك فوضويًا ويصعب صيانته.

يحل Zustand هذه المشكلة، حيث يمنح تطبيقك حالة مشتركة خارج مكونات React الخاصة بك.

فكر في الأمر بهذه الطريقة:

بدون Zustand: المكون A يمرر الـ props إلى B، وB يمررها إلى C، وC يمررها إلى D.

مع Zustand: يتواصل كل مكون مباشرة مع مخزن مركزي (central store). لا يوجد وسيط. لا يوجد "prop drilling".

يتكون مخزن Zustand من شيئين:

  • الحالة (State): بياناتك.
  • الإجراءات (Actions): الدوال التي تغير بياناتك.

هذا كل ما في الأمر.

يتميز Zustand بالسرعة لأنه يعيد رندرة (re-renders) المكونات التي تستخدم البيانات المحددة التي تغيرت فقط.

إذا كنت تريد أن تظل بياناتك محفوظة بعد تحديث الصفحة، فاستخدم localStorage. وبما أن localStorage يخزن النصوص فقط، يجب عليك استخدام JSON.stringify لحفظ الكائنات (objects) و JSON.parse لقراءتها.

إليك طريقة بسيطة لهيكلة مخزن المصادقة (auth store):

  • قم بتخزين المستخدم والرمز (token) في localStorage.
  • استخدم دالة تسجيل الدخول (login function) لتحديث المخزن وتخزين المتصفح.
  • استخدم دالة تسجيل الخروج (logout function) لمسح كليهما.

كيف يقارن بـ Redux؟

يتطلب Redux وجود dispatchers و reducers ويتضمن الكثير من الكود المتكرر (boilerplate code). أما Zustand فيسمح لك باستدعاء دالة مباشرة، مما يقلل من الجهد الذهني المطلوب ويقلل من عمليات الإعداد.

أخطاء شائعة يجب تجنبها:

  • نسيان إرجاع كائن (object) في دالة create. استخدم الأقواس حول الكائن الخاص بك.
  • استخدام الفواصل المنقوطة (semicolons) داخل كائن الحالة الخاص بك. استخدم الفواصل (commas) بدلاً منها.
  • محاولة تحليل (parsing) بيانات هي بالفعل نصوص.

مكتبات إدارة الحالة لا تتعلق بإدارة الحالة فحسب، بل تتعلق بإدارة التعقيد.

توقف عن محاولة حفظ كل واجهة برمجة تطبيقات (API). ابدأ بالنظر إلى المشكلة التي تحاول الأداة حلها. عندما تفهم المشكلة، ستجد أن الأداة منطقية.

المصدر: https://dev.to/chinwuba_jeffrey/understanding-zustand-2g11