التوسع باستخدام Reducer و Context

تسمح لك Reducers بتوحيد منطق تحديث حالة المكون. بينما يسمح لك Context بنقل المعلومات عميقًا إلى المكونات الأخرى. يمكنك الجمع بين Reducers و Context لإدارة حالة شاشة معقدة.

الجمع بين Reducer و Context

في هذا المثال منمقدمة عن Reducers، تتم إدارة الحالة بواسطة Reducer. تحتوي دالة Reducer على كل منطق تحديث الحالة ويتم تعريفها في أسفل هذا الملف:

يساعد المُختزِل في الحفاظ على معالجات الأحداث قصيرة وموجزة. ومع ذلك، مع نمو تطبيقك، قد تواجه صعوبة أخرى.حاليًا، حالةtasksووظيفةdispatchمتاحة فقط في مكون المستوى الأعلىTaskApp.للسماح للمكونات الأخرى بقراءة قائمة المهام أو تغييرها، يجب عليك تمرير الحالة الحالية ومعالجات الأحداث التي تغيرها بشكل صريحكخاصية (props).

على سبيل المثال، يمررTaskAppقائمة المهام ومعالجات الأحداث إلىTaskList:

وتمررTaskListمعالجات الأحداث إلىTask:

في مثال صغير كهذا، يعمل هذا بشكل جيد، ولكن إذا كان لديك عشرات أو مئات المكونات في المنتصف، فإن تمرير جميع الحالات والدوال يمكن أن يكون محبطًا للغاية!

لهذا السبب، كبديل لتمريرها عبر الخصائص، قد ترغب في وضع كل من حالةtasksودالةdispatch في السياق.بهذه الطريقة، يمكن لأي مكون أسفلTaskAppفي الشجرة قراءة المهام وإرسال الإجراءات دون الحاجة إلى "تمرير الخصائص" المتكرر.

إليك كيف يمكنك الجمع بين المخفض والسياق:

1. إنشاءالسياق.
2. وضعالحالة ودالة الإرسال في السياق.
3. استخدامالسياق في أي مكان في الشجرة.

الخطوة 1: إنشاء السياق

تُرجع دالة الخطافuseReducer قائمة tasksالحالية ودالةdispatchالتي تتيح لك تحديثها:

لتمريرهما إلى أسفل الشجرة، سوفتنشئسياقين منفصلين:

• TasksContextيوفر القائمة الحالية للمهام.
• TasksDispatchContextيوفر الدالة التي تتيح للمكونات إرسال الإجراءات.

قم بتصديرهما من ملف منفصل حتى تتمكن لاحقًا من استيرادهما من ملفات أخرى:

هنا، أنت تمررnullكقيمة افتراضية لكلا السياقين. القيم الفعلية سيتم توفيرها بواسطة مكونTaskApp.

الخطوة 2: ضع الحالة ووظيفة الإرسال في السياق

الآن يمكنك استيراد كلا السياقين في مكونTaskApp. خذ tasks و dispatchاللذين تم إرجاعهما بواسطةuseReducer() و قم بتوفيرهمالجميع الشجرة الفرعية أدناه:

في الوقت الحالي، أنت تمرر المعلومات عبر الخاصيات وفي السياق معًا:

في الخطوة التالية، ستزيل تمرير الخاصيات.

الخطوة 3: استخدم السياق في أي مكان في الشجرة

الآن لم تعد بحاجة إلى تمرير قائمة المهام أو معالجات الأحداث عبر الشجرة:

بدلاً من ذلك، يمكن لأي مكون يحتاج إلى قائمة المهام قراءتها منTasksContext:

لتحديث قائمة المهام، يمكن لأي مكون قراءة دالةdispatchمن السياق واستدعائها:

مكونTaskAppلا يمرر أي معالجات للأحداث للأسفل، ومكونTaskListلا يمرر أي معالجات للأحداث إلى مكونTaskأيضًا.كل مكون يقرأ السياق الذي يحتاجه:

لا يزال "الحالة" موجودة في مكون المستوى الأعلىTaskApp، ويتم إدارتها باستخدامuseReducer.لكنtasks و dispatchأصبحا متاحين الآن لكل مكون أدناه في الشجرة عن طريق استيراد واستخدام هذه السياقات.

نقل جميع التوصيلات إلى ملف واحد

ليس عليك القيام بذلك، ولكن يمكنك ترتيب المكونات بشكل أكبر عن طريق نقل كل من المُخفض (reducer) والسياق إلى ملف واحد. حاليًا، يحتويTasksContext.jsفقط على تصريحين للسياق:

هذا الملف على وشك أن يصبح مزدحمًا! ستقوم بنقل المُخفض (reducer) إلى نفس الملف. ثم ستعلن عن مكونTasksProviderجديد في نفس الملف. سيقوم هذا المكون بربط جميع القطع معًا:

1. سيدير الحالة باستخدام مُخفض (reducer).
2. سيوفر كلا السياقين للمكونات أدناه.
3. سوفيأخذ children كخاصية (prop)حتى تتمكن من تمرير JSX إليه.

هذا يزيل كل التعقيد والتوصيلات من مكونTaskAppالخاص بك:

يمكنك أيضًا تصدير دوالتستخدمالسياق منTasksContext.js:

عندما يحتاج مكون إلى قراءة السياق، يمكنه القيام بذلك من خلال هذه الدوال:

هذا لا يغير السلوك بأي شكل، ولكنه يتيح لك لاحقًا تقسيم هذه السياقات بشكل أكبر أو إضافة بعض المنطق إلى هذه الدوال.الآن أصبح كل توصيل السياق والمُخفض موجودًا فيTasksContext.js. هذا يحافظ على نظافة المكونات وعدم ازدحامها، بحيث تركز على ما تعرضه بدلاً من مكان حصولها على البيانات:

يمكنك التفكير فيTasksProviderكجزء من الشاشة يعرف كيفية التعامل مع المهام، وuseTasksكطريقة لقراءتها، وuseTasksDispatchكطريقة لتحديثها من أي مكون أدنى في الشجرة.

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

ملخص

• يمكنك دمج المُخفض مع السياق للسماح لأي مكون بقراءة وتحديث الحالة فوقه.
• لتوفير الحالة ودالة الإرسال للمكونات أدناه:
  1. أنشئ سياقين (للحالة ولدوال الإرسال).
  2. وفر كلا السياقين من المكون الذي يستخدم المُخفض.
  3. استخدم أيًا من السياقين من المكونات التي تحتاج إلى قراءتهما.
• يمكنك ترتيب المكونات بشكل أكبر عن طريق نقل جميع التوصيلات إلى ملف واحد.
  • يمكنك تصدير مكون مثلTasksProviderالذي يوفر السياق.
  • يمكنك أيضًا تصدير خطافات مخصصة مثلuseTasks و useTasksDispatchلقراءتها.
• يمكن أن يكون لديك العديد من أزواج السياق-المُخفض مثل هذه في تطبيقك.