useReducer مُقلِّل الحالة
آخر تحديث: 2026-11-03
useReducer مُقلِّل الحالة
يجمع useReducer سؤال «كيف تتغيّر الحالة؟» في دالة مُقلِّل خالقة واحدة: إرسال إجراء يستدعيها، فيحسب المُقلِّل الحالة الجديدة من ذلك الإجراء. وحين تكون انتقالات الحالة كثيرة أو منطقها معقّداً أو عدة قيم يجب أن تتغيّر معاً، يكون أوضح وأيسر اختباراً من كومة استدعاءات useState. والمُقلِّل دالة عادية، فيمكنك تجربته وحده من دون عرض أي شيء.
| المجموعة | الآثار الجانبية والأداء |
|---|---|
| النوع | خطاف |
| منذ الإصدار | React 16.8 |
ℹ️ ملاحظة يحوّل المحرّر JSX إلى JavaScript ويعرض الواجهة الحقيقية داخل بيئة معزولة؛ تُركَّب المكوّنات تلقائياً دون استدعاء render يدوي.
📝 الصيغة
function reducer(state, action) {
switch (action.type) {
case 'increment': return { count: state.count + 1 }
case 'reset': return { count: 0 }
default: return state // الإجراء المجهول يُعيد الحالة نفسها
}
}
const [state, dispatch] = useReducer(reducer, { count: 0 })
dispatch({ type: 'increment' })⚙️ المعاملات
| reducer | الدالة الخالصة (state, action) => newState: بلا آثار جانبية، وبلا تعديل مباشر للحالة، ويجب أن تُعيد كائناً جديداً. |
|---|---|
| initialArg | الحالة الابتدائية؛ ويمكن تمرير وسيط ثالث لتهيئة كسولة init(initialArg). |
القيمة المرجعة：يعيد [state, dispatch]، أي الحالة الحالية ودالة الإرسال. ومرجع dispatch لا يتغيّر أبداً، لذا من الآمن وضعه في مصفوفة اعتمادية أو تمريره إلى مكوّن ابن.
▶ مثال
المثال يعمل مباشرة: يُعرض تلقائياً عند التوسيع وتظهر التعديلات فوراً.
الناتج：
ترسل الأزرار الثلاثة إجراءات inc و dec و reset، ويحسب العدّاد عبر المُقلِّل وتتحدّث الواجهة لحظياً.💡 النقاط الأساسية
💡 نصيحة مرجع دالة الإرسال ثابت، فلا تحتاج إلى useCallback إضافي تمريره إلى ابن عميق.
ℹ️ ملاحظة يجب أن يكون المُقلِّل دالة خالصة: أما جلب البيانات أو الكتابة إلى localStorage فمكانها معالج حدث أو useEffect.
⚠️ تحذير تعديل الحالة مباشرة (state.count++) هو الخطأ الكلاسيكي — أعِد دائماً كائناً جديداً.
🏷️ المزيد من الآثار والأداء
💡 حالات ذات صلة
المزيد من الحالات قريباً.
📚 دروس ذات صلة
useReducer
الدرس الثاني عشر من الدليل: النموذج الذهني للمُقلِّل والاختيار بين useReducer و useState.
❓ الأسئلة الشائعة
س كيف أختار بين useReducer و useState؟
ج استخدم useState لقيمة مستقلة وبسيطة؛ واستخدم useReducer حين تتغيّر عدة قيم معاً، أو يكون منطق التحديث معقّداً، أو تعتمد خطوة على سابقتها.
س هل يمكن للمُقلِّل إرسال طلب؟
ج لا، يجب أن يكون المُقلِّل دالة خالصة. ضع الطلب في معالج حدث أو أثر، وأرسل النتيجة عند وصولها.
س هل أستطيع قراءة الحالة الجديدة مباشرة بعد الإرسال؟
ج لا. الإرسال يجدول إعادة عرض فقط، فالحالة في الإغلاق الحالي ما زالت القيمة القديمة؛ راقبها عبر useEffect حين تحتاج التفاعل معها.
