Redux And Redux ToolKit

✅ أولاً: ما هي Redux؟

Redux هي مكتبة لإدارة الحالة (State Management) في تطبيقات JavaScript، خصوصًا React.
تساعدك في حفظ البيانات المشتركة بين أجزاء التطبيق ومزامنتها بطريقة منظمة.

✔ ما الذي تقدمه Redux؟

• مكان مركزي واحد لحفظ البيانات (Store).
• طريقة واضحة لتحديث البيانات عبر Actions و Reducers.
• تدفق بيانات أحادي الاتجاه يجعل التطبيق قابلًا للتوقع (Predictable).
• مفيدة جدًا في التطبيقات الكبيرة التي تحتوي على بيانات كثيرة تتشارك بين أجزاء عديدة.

❗ مشكلة Redux التقليدي

• كتابة الكثير من الملفات والكود المكرر (Boilerplate).
• إعداد store وإضافة middlewares يدويًا.
• تحديث الـ state يجب أن يكون دائمًا بطريقة immutable مما يصعّب الوظيفة.

✅ ثانيًا: ما هي Redux Toolkit؟

Redux Toolkit (RTK) هي الطريقة الرسمية الحديثة المُوصى بها من فريق Redux للعمل مع Redux.

هي ليست بديلًا لـ Redux، بل بناء أعلى Redux، هدفها:

• تسهيل الاستخدام
• تقليل الكود
• منع الأخطاء الشائعة
• إعداد جاهز وسريع

✔ ماذا تقدم Redux Toolkit؟

• configureStore لإعداد الـ store بسهولة.
• createSlice لإنشاء state + reducers + actions في ملف واحد.
• createAsyncThunk لإدارة طلبات API بسهولة.
• دعم التحديثات immutable تلقائيًا عبر مكتبة Immer.
• إعداد DevTools و middleware بشكل تلقائي.

🔥 الفرق بين Redux و Redux Toolkit بشكل مختصر

الجانب	Redux	Redux Toolkit
طريقة العمل	يدوي بالكامل	جاهز وسهل
عدد الملفات والكود	كثير (Boilerplate)	قليل ومنظم
إنشاء reducers/actions	تكتبها يدويًا	يتم إنشاؤها عبر createSlice
إدارة الطلبات async	تحتاج Thunk يدوي أو مكتبة خارجية	موجودة بـ createAsyncThunk
الإعداد	معقد وتدريب	بسيط جدًا
توصية فريق Redux	قديم، للاستخدام المتقدم	الطريقة الرسمية المفضلة الآن

🧠 تشبيه بسيط

تخيل Redux مثل سيارة مانيوال تحتاج:

• تشغيل المحرك يدويًا
• تغيير القير يدويًا
• كل شيء بيدك

أما Redux Toolkit مثل سيارة أوتوماتيك:

• كل شيء مُجهّز
• أسهل وأسرع
• تساعدك تمنع الأخطاء

لكن في النهاية كلاهما سيارة → أي كلاهما Redux.

🎯 الخلاصة

• Redux: المكتبة الأساسية لإدارة الحالة. قوية لكنها تتطلب كتابة كثير وإعدادات معقدة.
• Redux Toolkit: أداة رسمية حديثة مبنية على Redux، تجعل استخدام Redux أسهل، أسرع، وأقل خطأ.

والموصى به الآن من فريق Redux:

استخدم Redux Toolkit بدل Redux التقليدي في أي مشروع جديد.

Redux Toolkit هي مكتبة رسمية من فريق Redux تهدف إلى تسهيل استخدام Redux في تطبيقات JavaScript/TypeScript (مثل React).
بمعنى آخر: هي طريقة محسّنة وحديثة للكتابة والعمل بـ Redux بدون صداع الإعدادات المعقدة.

أولاً: ما هي Redux Toolkit؟

يمكن تلخيصها في نقاط:

1. غلاف (Wrapper) فوق Redux
   ليست بديلاً عن Redux، بل تعمل فوقه وتستخدمه داخليًا، لكنها تعطيك:
   • دوال جاهزة
   • إعدادات افتراضية سليمة
   • أنماط استخدام موحّدة وحديثة
2. توفر طريقة قياسية (Standard) لبناء الـ Store
   بدل ما تكتب إعدادات Redux الطويلة يدويًا (createStore, combineReducers, middlewares…)
   تستخدم دالة واحدة اسمها configureStore تقوم بكل شيء مهم عنك.
3. تسهّل تعريف الـ state والـ reducers
   عن طريق دوال مثل:
   • createSlice 👉 تعرف الـ state + الـ reducers + الـ actions في مكان واحد.
   • createAsyncThunk 👉 تسهّل التعامل مع الطلبات غير المتزامنة (API calls) داخل Redux.
4. تتبنى أفضل الممارسات الحديثة
   مثل:
   • استخدام Immer لتحديث الـ state بطريقة “ظاهرها” mutable لكن فعليًا تبقى immutable.
   • دعم TypeScript بشكل ممتاز.
   • إعداد DevTools وmiddleware الشائعة تلقائيًا.

ثانياً: ما فائدة Redux Toolkit؟ ولماذا أستخدمها؟

1. تقليل الكود المكرر (Boilerplate)

المشكلة الأساسية في Redux التقليدي:

• ملفات كثيرة: actions, action types, reducers…
• تكرار في التعاريف
• إعدادات معقدة للـ store

Redux Toolkit يحل هذا عبر:

• createSlice يجمع كل شيء في ملف واحد (state, reducers, actions).
• لا تحتاج لتعريف CONSTANTS لكل نوع Action.
• إعداد جاهز للـ store بدون صداع.

النتيجة:
كود أقل + تنظيم أوضح + سرعة في التطوير.

2. إعداد سهل للـ Store والـ Middleware

عادةً مع Redux تحتاج:

• إعداد Redux DevTools يدويًا
• تركيب middlewares مثل thunk
• ترتيب أكثر من ملف

مع Redux Toolkit:

• configureStore يقوم:
  • بتمكين Redux DevTools تلقائيًا في التطوير
  • تركيب thunk وغيره من الـ middleware المفيدة
  • تفعيل تحذيرات مفيدة (مثل كشف التعديلات غير المسموح بها للـ state)

النتيجة:
إعداد “جاهز للعمل” بممارسة صحيحة بدون تفكير طويل.

3. تعامل أسهل مع الطلبات غير المتزامنة (Async logic)

في Redux العادي:
إدارة الـ API calls معقدة (تكتب thunks يدويًا أو تستخدم مكتبات إضافية).

في Redux Toolkit:

• createAsyncThunk:
  • تعرّف عملية async مرة واحدة
  • يعطيك حالات جاهزة: pending, fulfilled, rejected
  • يسهّل إدارة حالات التحميل (loading) والأخطاء (error)

النتيجة:
منطق الـ API يصبح منظمًا وواضحًا بدل الفوضى.

4. تقليل الأخطاء ودعم أفضل لـ TypeScript

لأنها:

• تستخدم أنماط جاهزة ومجرّبة
• متكاملة مع TypeScript
• وتستخدم Immer للـ immutable updates

فهذا يسبب:

• أخطاء أقل في التعامل مع الـ state
• تجربة تطوير أسلس خصوصًا مع المحررات الذكية (intellisense)

5. اتباع التوصيات الرسمية لـ Redux

Redux Toolkit هي:

• الأداة الموصى بها رسميًا من فريق Redux لكتابة Redux في 90% من الحالات.
• معظم الأمثلة الحديثة، الدروس، والقوالب الجديدة مبنية عليها.

النتيجة:
ما دمت ستستخدم Redux، فالمتوقع الآن أن تستخدمه عبر Redux Toolkit.

خلاصة سريعة

• ماهي؟
  حزمة رسمية من Redux لتسهيل بناء الـ store، تعريف الـ state والـ reducers، والتعامل مع الـ async logic بطريقة أسهل وأقصر وأكثر تنظيمًا.
• ما الفائدة؟
  • تقلل الكود المكرر
  • تبسّط إعداد Redux
  • تنظّم الـ async logic
  • تقلل الأخطاء
  • تتبع أفضل الممارسات الحديثة