مدير التراكبات العام (Context + Reducer)
مركّز التراكبات باستخدام Context وReducer: مخزن واحد للنوافذ المنبثقة والتنبيهات مع إجراءات بسيطة يمكن استدعاؤها من أي مكان.
مدير التراكبات العام (Context + Reducer) درس مجاني في React Academy على CoddyKit. هذا هو الدرس 2 من أصل 3. يمكنك قراءة الدرس كاملاً أدناه مجاناً — ثم تمرن عليه مباشرة في المتصفح باستخدام محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7. هذا الدرس جزء من مسار التعلم في React Academy، وتقدمك يتزامن عبر الويب وتطبيق CoddyKit. تتضمن دورة React Academy 3 دروس في المجموع.
لماذا نستخدم مديرًا مركزيًا؟
الهدف: التحكم في جميع الطبقات العائمة من مكان واحد.
- يتيح Context الإجراءات
- يدير Reducer الحالة
- تتراكم النوافذ المنبثقة، وتنتظر الإشعارات القصيرة في قائمة
قواعد التصميم
- احتفظ بـ مخزن واحد للطبقات العائمة
- وفّر openModal/closeTop/showToast
- صيّر الطبقات باستخدام Portal
- حافظ على أساسيات إتاحة الاستخدام: role="dialog" وEscape والخلفية
مخزن الحالة: context + reducer
أنشئ مخزنًا صغيرًا: مكدسات لـالنوافذ المنبثقة والإشعارات المنبثقة، مع إجراءات بسيطة.
<div id="root"></div>استخدام المدير من المكوّنات
يمكن لأي مكوّن استدعاء openModal أو showToast، من دون تمرير الخصائص عبر مكوّنات وسيطة.
<div id="root"></div>التكديس + Escape لإغلاق العنصر العلوي
ادعم مكدسًا: افتح نافذة منبثقة أخرى من داخل نافذة منبثقة، ويغلق Escape العنصر العلوي.
<div id="root"></div>نصائح وقائمة تحقق
- حافظ على حالة التراكب عامة
- اعرض إجراءات صغيرة
- اعرض الطبقات باستخدام Portal
- أغلق العنصر العلوي عند الضغط على Escape/الخلفية
اختبار مفهوم مدير التراكبات
خلاصة
خلاصة: يعمل مخزن التراكبات العام (context + reducer) على توحيد إدارة النوافذ المنبثقة والإشعارات المنبثقة. ترسل المكوّنات إجراءات؛ وتُعرض الطبقات عبر بوابة؛ ويغلق Escape أو الخلفية العنصر العلوي.
الأسئلة الشائعة
هل درس «مدير التراكبات العام (Context + Reducer)» مجاني؟
نعم — نص درس «مدير التراكبات العام (Context + Reducer)» كامل متاح مجاناً هنا على الويب. لتمرينه بشكل تفاعلي (محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7) وفتح باقي دورة React Academy، انتقل إلى CoddyKit PRO. تتضمن دورة React Academy 3 دروس في المجموع.
ماذا ستتعلم في «مدير التراكبات العام (Context + Reducer)»؟
مركّز التراكبات باستخدام Context وReducer: مخزن واحد للنوافذ المنبثقة والتنبيهات مع إجراءات بسيطة يمكن استدعاؤها من أي مكان. تتمرن على React Academy مع أكواد عملية تشغلها مباشرة في المتصفح، ومدرس ذكاء اصطناعي متاح 24/7 يجيب على أسئلتك أثناء عملك.
هل أحتاج إلى خبرة سابقة لأبدأ React Academy؟
لا تُشترط خبرة سابقة. React Academy على CoddyKit منظم للمبتدئين حتى المتقدمين، لذا يمكنك البدء من هنا أو من البداية والتقدم بسرعتك الخاصة. هذا هو الدرس 2 من أصل 3.
كم من الوقت يستغرق درس «مدير التراكبات العام (Context + Reducer)»؟
معظم دروس CoddyKit تستغرق حوالي 5–10 دقائق. كل منها موجز وتفاعلي، لذا تحرز تقدماً مستمراً وتستأنف من حيث توقفت عبر الويب والتطبيق.
هل يمكنني كتابة وتشغيل أكواد في درس React Academy هذا؟
نعم. كل درس في React Academy يتضمن محرر أكواد مدمج، لذا تكتب وتشغل أكواداً حقيقية مباشرة في متصفحك وتحصل على تعليقات فورية من الذكاء الاصطناعي — بدون إعداد محلي.
جميع الدروس في هذه الدورة
- البوابات وحصر التركيز والإغلاق بمفتاح Escape
- مدير التراكبات العام (Context + Reducer)
- إعلانات إمكانية الوصول (aria-live)