مكون تبديل قائم على المُخفِّض

غالباً ما تبدأ مفاتيح تبديل واجهة المستخدم بشكل بسيط.useState تُستخدم القيم المنطقية، ولكن مع نمو التطبيق، تتراكم القواعد الشرطية، مما يُجبر التبديل على التفعيل لأدوار مُحددة، ويُعطّل الانتقالات أثناء التحميل، ويُعيد التعيين بعد الإرسال، وغير ذلك. عندما تتوزع هذه المنطق عبر مُعالجات الأحداث والتأثيرات، يصبح السلوك غير متوقع ويصعب صيانته. يُعالج نمط مُختزل الحالة هذه المشكلة بنقل منطق السلوك من جسم المُكوّن إلى مُختزل يُحدد انتقالات الحالة بشكل صريح. في هذا الدرس، بناء مفتاح تبديل مُعتمد على المُختزل مع انتقالات حالة صريحة وقابلة للاختبار. في الدرس التالي، سنُوسّعه لدعم تجاوزات المُختزل الخارجية.

تصميم مخفض لمفتاح تبديل

يبدأ المكون القائم على المُختزل بعقد سلوكي داخلي مُحدد. بالنسبة لمفتاح تبديل بسيط، يتكون العقد من العناصر التالية:

1. تعريف الحالة: يحافظ المفتاح على شكل حالة بسيط وحتمي.

هذا يجعل نمذجة الحالة بسيطة ومركزة.

2. مفردات الأفعال: تصف الأفعال ما حدث بدلاً من ما يجب فعله . يدعم مفتاح التبديل عادةً ما يلي:

   1. "TOGGLE"

   2. "TURN_ON"

   3. "TURN_OFF"

تسمح هذه التصنيفات التصريحية للمُختزل بتفسير النية دون تضمين المنطق في واجهة المستخدم.

3. منطق الانتقال (المختزل): يحدد المختزل كيفية تحويل كل إجراء للحالة الحالية.

أمثلة:

• "TURN_ON" → { isOn: true }

• "TURN_OFF" → { isOn: false }

• "TOGGLE" → يقلب القيمة المنطقية ...