تشغيل خطاف useReducer عملياً | إدارة الحالات المركبة عبر خطاف useReducer

شرح صفوف ومحتوى الفقرة

الصف 1 شرح توضيحي

يتم ربط خطاف useReducer داخل المكون عبر ثلاث خطوات عملية منظمة: استيراد { useReducer } من حزمة 'react'، ثم استدعاء const [state, dispatch] = useReducer(reducer, initialState) في المستوى الأعلى للمكون، وأخيراً استبدال دوال الضبط المباشرة باستدعاءات dispatch(action).

يستقبل الخطاف معاملين هما مرجع دالة المخفض والقيمة الابتدائية للحالة، ويعيد مصفوفة ثنائية تضم القيمة الحالية للقراءة ودالة الإرسال لإطلاق التحديثات.

الصف 2 صورة توضيحية

مخطط يوضح المراحل الأربع لدورة خطاف useReducer من حدث المستخدم وإرسال الأمر إلى دالة المخفض وإعادة الرسم

الصف 3 كود برمجي

HTML

import { useReducer } from 'react';

function CounterPanel() {
  const [state, dispatch] = useReducer(reducer, {
    seats: 2,
  });
  return (
    <button onClick={() => dispatch({ type: 'add' })}>
      Seats: {state.seats}
    </button>
  );
}

جرّب بنفسك

الصف 4 ملاحظة هامة

Wiring the useReducer Hook تشغيل خطاف useReducer عملياً

شرح صفوف ومحتوى الفقرة

جميع فقرات هذا الدرس (إدارة الحالات المركبة عبر خطاف useReducer)