أساسيات useReducer وأنماط الإجراءات
تعلّم useReducer: الحالة + reducer(state, action) ← الحالة التالية. استخدم إجراءات واضحة (type، payload) لمعالجة تحديثات الحقول المتعددة.
أساسيات useReducer وأنماط الإجراءات درس مجاني في React Academy على CoddyKit. هذا هو الدرس 2 من أصل 3. يمكنك قراءة الدرس كاملاً أدناه مجاناً — ثم تمرن عليه مباشرة في المتصفح باستخدام محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7. هذا الدرس جزء من مسار التعلم في React Academy، وتقدمك يتزامن عبر الويب وتطبيق CoddyKit. تتضمن دورة React Academy 3 دروس في المجموع.
لماذا نستخدم useReducer؟
الهدف: استخدام useReducer لإدارة التحديثات عبر دالة reducer واحدة. يكون ذلك مفيدًا عندما تتغير عدة حقول معًا.
- كائن الحالة
- الإجراءات: type + payload
- reducer(state, action) نقية
بنية Reducer
تستقبل Reducer الحالة الحالية وaction، وتُرجع الحالة التالية. حافظوا على نقائها دون آثار جانبية. استخدموا أنواع إجراءات صغيرة مثل INCREMENT أو RESET أو UPDATE_FIELD.
عرض توضيحي: عدّاد باستخدام useReducer
يوضح عدّاد صغير دورة الحالة ← الإجراء ← الحالة التالية باستخدام useReducer.
<div id="root"></div>
أنماط الإجراءات
حافظوا على بساطة الإجراءات:
- type: فعل قصير (مثل UPDATE_FIELD)
- payload: البيانات المطلوبة
- منشئات إجراءات صغيرة اختيارية لتجنب الأخطاء الإملائية
عرض توضيحي: نموذج باستخدام reducer
يدير reducer النموذج عدة حقول باستخدام إجراء UPDATE_FIELD واحد. ويتحكم موضع واحد في جميع التحديثات.
<div id="root"></div>
نصائح ومزالق
نصائح:
- حافظوا على صغر reducers ونقائها.
- اجمعوا الحقول المرتبطة في كائن حالة واحد.
- استخدموا أسماء واضحة للإجراءات، وتجنبوا الحالات المتشابهة الكثيرة.
التحقق من اختيار useReducer
مراجعة
مراجعة: عرّفوا reducer نقية، وأرسلوا إجراءات بسيطة، وأديروا تحديثات الحقول المتعددة في موضع واحد. اختاروا useReducer عندما تتغير عدة قيم معًا.
الأسئلة الشائعة
هل درس «أساسيات useReducer وأنماط الإجراءات» مجاني؟
نعم — نص درس «أساسيات useReducer وأنماط الإجراءات» كامل متاح مجاناً هنا على الويب. لتمرينه بشكل تفاعلي (محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7) وفتح باقي دورة React Academy، انتقل إلى CoddyKit PRO. تتضمن دورة React Academy 3 دروس في المجموع.
ماذا ستتعلم في «أساسيات useReducer وأنماط الإجراءات»؟
تعلّم useReducer: الحالة + reducer(state, action) ← الحالة التالية. استخدم إجراءات واضحة (type، payload) لمعالجة تحديثات الحقول المتعددة. تتمرن على React Academy مع أكواد عملية تشغلها مباشرة في المتصفح، ومدرس ذكاء اصطناعي متاح 24/7 يجيب على أسئلتك أثناء عملك.
هل أحتاج إلى خبرة سابقة لأبدأ React Academy؟
لا تُشترط خبرة سابقة. React Academy على CoddyKit منظم للمبتدئين حتى المتقدمين، لذا يمكنك البدء من هنا أو من البداية والتقدم بسرعتك الخاصة. هذا هو الدرس 2 من أصل 3.
كم من الوقت يستغرق درس «أساسيات useReducer وأنماط الإجراءات»؟
معظم دروس CoddyKit تستغرق حوالي 5–10 دقائق. كل منها موجز وتفاعلي، لذا تحرز تقدماً مستمراً وتستأنف من حيث توقفت عبر الويب والتطبيق.
هل يمكنني كتابة وتشغيل أكواد في درس React Academy هذا؟
نعم. كل درس في React Academy يتضمن محرر أكواد مدمج، لذا تكتب وتشغل أكواداً حقيقية مباشرة في متصفحك وتحصل على تعليقات فورية من الذكاء الاصطناعي — بدون إعداد محلي.
جميع الدروس في هذه الدورة
- أساسيات Context وتجنّب تمرير الخصائص عبر المكوّنات
- أساسيات useReducer وأنماط الإجراءات
- Context مع Reducer: حاويات حالة بسيطة