السؤال الذي يحدد مجموعة أدوات إدارة الحالة (State Stack) الخاصة بك
توقف عن مقارنة Redux بـ React Query.
الأمر يشبه السؤال عما إذا كنت تريد مطرقة أم مفكًا قبل أن تعرف ما الذي تبنيه. فكل من Redux و React Query و Zustand تحل مشكلات مختلفة.
القرار الحقيقي يأتي من سؤال واحد: من يملك مصدر الحقيقة (source of truth) لكل جزء من الحالة (state)؟
لديك نوعان من الحقيقة.
1. الحقيقة المملوكة (Owned Truth) العميل (client) هو المصدر. ويشمل ذلك أشياء مثل:
- هل الشريط الجانبي مفتوح؟
- ما هو المظهر (theme) الحالي؟
- ما هي الخطوة النشطة في النموذج؟ هذه الحالة تعتمد كليًا على قراراتك المحلية، ولا تحتاج إلى إعادة التحقق من صحتها مع الخادم (server).
2. الحقيقة المستعارة (Borrowed Truth) المصدر موجود على الخادم. العميل يحمل فقط نسخة مرآتية من تلك البيانات. هذه البيانات تتغير دون علمك. مهمتك هي إدارة:
- تقادم البيانات (Staleness)
- إبطال البيانات (Invalidation)
- إعادة جلب البيانات (Refetching)
- التخزين المؤقت (Caching)
يعاني معظم المطورين لأنهم يستخدمون أداة واحدة لكليهما. عندما تحاول إدارة "الحقيقة المستعارة" في reducer من جهة العميل، ينتهي بك الأمر بإعادة كتابة React Query بشكل سيئ؛ حيث ستقوم بكتابة حالات التحميل (loading states)، ومعالجة الأخطاء (error handling)، والتخزين المؤقت (caching) يدويًا، مما يؤدي إلى إنشاء كميات هائلة من الأكواد غير الضرورية.
افصل بينهما لتنجح.
استخدم React Query للحقيقة المستعارة؛ فهي تتولى مهام المزامنة الصعبة. استخدم Zustand للحقيقة المملوكة؛ فهي تتولى تخزين القيم البسيطة دون أي تعقيدات (zero ceremony).
لا تضع بيانات الخادم في Zustand. حافظ على وضوح هذا الحد الفاصل.
ماذا عن Redux و Sagas؟ ليست Sagas مخصصة لجلب البيانات، بل لتنسيق العمليات المعقدة عبر الزمن. استخدمها إذا كان تطبيقك يتعامل مع:
- تدفقات متزامنة وقابلة للإلغاء (Concurrent, cancellable flows).
- تدفقات websocket في الوقت الفعلي.
- آلات حالة (state machines) معقدة.
إذا كنت تستخدم React Query ولم تكن Sagas تقوم بأي شيء، فأنت لست بحاجة إليها.
هناك طريق ثالث: التوحيد (Unification). تتيح لك RTK Query و Redux الاحتفاظ بكل شيء في مخزن (store) واحد. وهذا يمنحك لقطة واحدة (snapshot) شاملة لتطبيقك بالكامل، مما يجعل تصحيح الأخطاء (debugging)، وتسجيل الخروج، والاستمرارية في وضع عدم الاتصال (offline persistence) أسهل بكثير.
اختر مسارك بناءً على احتياجاتك:
- React Query + Zustand: الأفضل للفرق الصغيرة التي تحتاج إلى تعقيد منخفض.
- Redux + Sagas: الأفضل للمجالات ذات التزامن العالي مثل تطبيقات التداول.
- RTK فقط: الأفضل لفرق الشركات الكبيرة التي تحتاج إلى مصدر واحد للحقيقة.
قبل اختيار الأداة، اسأل نفسك ما إذا كانت الحالة بحاجة للعيش في جهة العميل أصلاً. تقوم Server Components بنقل الكثير من هذا المنطق إلى الخادم.
اكتشف أولاً من يملك الحقيقة، وستتبعك الأداة المناسبة.