Context مع Reducer: حاويات حالة بسيطة

الهدف: تجميع منطق الحالة داخل Provider (Context) وreducer. يقرأ الأبناء عبر hook مخصص صغير: من دون تمرير الخصائص عبر الطبقات، ومع تحديثات يمكن التنبؤ بها.

النمط:

• إنشاء Context
• داخل Provider: استخدام useReducer(state, action)
• توفير {state, dispatch}
• إنشاء hook على نمط useCounter() يستدعي useContext

يتيح CounterProvider الأدنى state وdispatch؛ ويستخدم الأبناء useCounter() للقراءة والتحديث.

إرشادات:

• حافظوا على صغر الإجراءات (INC وDEC وRESET).
• ضعوا reducer بجوار Provider.
• صدّروا hook المخصص فقط لكي يظل استخدامه بسيطًا.

يوضح TodoProvider صغير تحديث عدة حقول بصورة يمكن التنبؤ بها باستخدام reducer واحد وواجهة API نظيفة لـhook.

المزالق:

• نسيان تغليف الأبناء باستخدام Provider.
• وضع كائنات ضخمة في Context؛ مرّروا فقط ما هو مطلوب.
• تغيير الحالة داخل reducer؛ أعيدوا دائمًا كائنات جديدة.

مراجعة: يوفّر Context إمكانية الوصول، بينما يدير useReducer الانتقالات. صدّروا hook صغيرًا من نمط useXxx لقراءة {state, dispatch} والحفاظ على بساطة المستهلكين.