UseReducer Hook: تبسيط إدارة الحالة في React

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

ال useReducer يقدم Hook منهجية منظمة لإدارة الحالات والانتقالات المعقدة. احتضان useReducer يفتح الخطاف المرونة والكفاءة ، مما يؤدي إلى رمز أكثر وضوحًا.

فهم استخدام الخطاف المخفض

ال useReducer الخطاف عبارة عن ميزة مضمنة توفرها React تعمل على تبسيط إدارة الحالة من خلال الالتزام بمبادئ نمط المخفض. يوفر لك بديلاً منظمًا وقابلًا للتطوير لـ useState الخطاف ، مناسب بشكل خاص للتعامل مع الحالات المعقدة.

من خلال الاستفادة من useReducer هوك ، يمكنك دمج كل من الحالة وانتقالاتها داخل وظيفة مخفض واحدة.

تأخذ هذه الوظيفة الحالة الحالية والإجراء كمدخلات ، وبالتالي تنتج الحالة الجديدة. إنه يعمل على نفس مبادئ وظيفة المخفض المستخدمة في JavaScript Array.prototype.reduce () طريقة.

النحو والمثال على استخدام useReducer Hook

بناء الجملة لاستخدام useReducer الخطاف على النحو التالي:

مقدار ثابت [state، dispatch] = useReducer (المخفض ، الحالة الأولية) ؛

ال useReducer تقبل الدالة وسيطين:

• مخفض (وظيفة): يحدد الطريقة التي يجب أن يتم بها تحديث الحالة بناءً على الحالة الحالية والإجراء المرسل.
• الأولي الحالة (أي): يمثل قيمة الحالة الأولية للمكون.

عند الاحتجاج ، فإن useReducer يُرجع الخطاف مصفوفة تتكون من عنصرين:

• الدولة (أي): يدل على قيمة الحالة الحالية.
• إيفاد (وظيفة): تتيح هذه الوظيفة إرسال الإجراءات لتحديث الحالة.

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

يستورد تفاعل ، {useReducer} من'تتفاعل';
مقدار ثابت initialState = 0;
مقدار ثابت المخفض = (الدولة والعمل) => {
يُحوّل (نوع الإجراء) {
قضية'زيادة راتب':
يعود دولة + 1;
قضية"إنقاص":
يعود ولاية - 1;
تقصير:
يعود ولاية؛
 }
};
مقدار ثابت العداد = () => {
مقدار ثابت [count، dispatch] = useReducer (المخفض ، الحالة الأولية) ؛
مقدار ثابت handleIncrement = () => {
 إرسال({ يكتب: 'زيادة راتب' });
 };
مقدار ثابت handleDecrement = () => {
 إرسال({ يكتب: "إنقاص" });
 };
يعود (



زيادة </button>
{عدد} </span>
إنقاص </button>
 </div>
 );
};

من الرسم التوضيحي أعلاه ، الحالة الأولية لـ 0 يتم تعريفها جنبًا إلى جنب مع وظيفة المخفض المسؤولة عن التعامل مع نوعين من الإجراءات: زيادة راتب و التناقص. تقوم وظيفة المخفض بتعديل الحالة حسب الأصول وفقًا للإجراءات المحددة.

من خلال الاستفادة من useReducer الخطاف ، تتم تهيئة الحالة ، ويتم الحصول على قيمة الحالة الحالية ووظيفة الإرسال. يتم استخدام وظيفة الإرسال لاحقًا لتشغيل تحديثات الحالة عند النقر فوق الأزرار المعنية.

بناء وظيفة مخفض

من أجل الاستخدام الأمثل لـ useReducer الخطاف ، يمكنك إنشاء وظيفة مخفض تصف كيفية تحديث الحالة بناءً على الإجراءات المرسلة. تقبل وظيفة المخفض هذه الحالة الحالية والإجراء كوسائط وتعيد الحالة الجديدة.

عادة ، وظيفة المخفض يستخدم عبارة التبديل الشرطية للتعامل مع أنواع الإجراءات المختلفة وتنفيذ تعديلات الحالة وفقًا لذلك.

ضع في اعتبارك المثال أدناه لوظيفة المخفض المستخدمة لإدارة قائمة المهام:

مقدار ثابت initialState = [] ،
مقدار ثابت المخفض = (الدولة والعمل) => {
يُحوّل (نوع الإجراء) {
قضية'يضيف':
يعود [... state، action.payload]؛
قضية"تبديل":
يعود state.map ((لكى يفعل) =>
 todo.id action.payload؟ { ...لكى يفعل، مكتمل:! todo.completed}: todo
 );
قضية'يمسح':
يعود state.filter ((لكى يفعل) => todo.id! == action.payload) ؛
تقصير:
يعود ولاية؛
 }
};

في المثال أعلاه ، تتعامل وظيفة المخفض مع ثلاثة أنواع مختلفة من الإجراءات: يضيف, تبديل، و يمسح. عند استلام يضيف الإجراء ، يقوم بإلحاق الحمولة (عنصر مهام جديد) بملف ولاية مجموعة مصفوفة.

في حالة تبديل العمل ، فإنه يتناوب مكتمل خاصية عنصر todo المرتبط بالمعرف المحدد. ال يمسح الإجراء ، من ناحية أخرى ، يلغي عنصر todo المرتبط بالمعرف المقدم من مصفوفة الحالة.

في حالة عدم تطابق أي من أنواع الإجراءات ، تقوم وظيفة المخفض بإرجاع الحالة الحالية دون تغيير.

إيفاد الإجراءات

لتفعيل تحديثات الحالة التي ييسرها useReducer هوك ، يصبح إرسال الإجراءات لا غنى عنه. تمثل الإجراءات كائنات JavaScript عادية توضح النوع المطلوب من تعديل الحالة.

تقع مسؤولية التعامل مع هذه الإجراءات وإنشاء الحالة اللاحقة على وظيفة المخفض.

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

في الأمثلة السابقة ، تم إرسال الإجراءات باستخدام بناء الجملة إرسال ({type: 'actionType'}). ومع ذلك ، فمن المتصور أن تشمل الإجراءات البيانات التكميلية ، والمعروفة باسم الحمولة، والذي يوفر مزيدًا من الأفكار المتعلقة بالتحديث. على سبيل المثال:

إرسال({ يكتب: 'يضيف', الحمولة: { بطاقة تعريف: 1, نص: 'انهي الواجب المنزلي', مكتمل: خطأ شنيع } });

في هذا السيناريو ، فإن ملف يضيف يتضمن الإجراء كائن حمولة يغلف تفاصيل عنصر todo الجديد ليتم دمجه في الحالة.

إدارة الحالة المعقدة باستخدام مخفض الاستخدام

القوة الحقيقية لـ useReducer يكمن الخطاف في قدرته على إدارة هياكل الدولة المعقدة ، التي تشمل العديد من القيم المترابطة وتحولات الحالة المعقدة.

من خلال مركزية منطق الحالة داخل وظيفة المخفض ، تصبح إدارة أنواع الإجراءات المتنوعة والتحديث المنهجي للحالة مسعى ممكنًا.

النظر في سيناريو حيث أ يتكون نموذج التفاعل من حقول إدخال متعددة. بدلاً من إدارة حالة كل مدخل على حدة من خلال useState، ال useReducer يمكن استخدام الخطاف لإدارة حالة النموذج بشكل شامل.

يمكن لوظيفة المخفض التعامل ببراعة مع الإجراءات ذات الصلة بتعديل الحقول المحددة والتحقق الشامل من النموذج بأكمله.

مقدار ثابت initialState = {
 اسم: '',
 بريد إلكتروني: '',
 كلمة المرور: '',
 isFormValid: خطأ شنيع,
};
مقدار ثابت المخفض = (الدولة والعمل) => {
يُحوّل (نوع الإجراء) {
قضية"updateField":
يعود {... state، [action.payload.field]: action.payload.value}؛
قضية"ValidateForm":
يعود { ...ولاية، isFormValid: action.payload}؛
تقصير:
يعود ولاية؛
 }
};

في المثال ، تقدم وظيفة المخفض نوعين مختلفين من الإجراءات: updateField و التحقق من صحة النموذج. ال updateField يسهل الإجراء تعديل حقل معين داخل الدولة من خلال الاستفادة من القيمة المقدمة.

على العكس من ذلك ، فإن التحقق من صحة النموذج يقوم الإجراء بتحديث ملف isFormValid على أساس نتيجة التحقق المقدمة.

من خلال توظيف useReducer ربط لإدارة حالة النموذج ، يتم دمج جميع الحالات والإجراءات المرتبطة داخل كيان واحد ، وبالتالي تعزيز سهولة الفهم والصيانة.

مقارنة useReducer مع حلول إدارة الدولة الأخرى

على الرغم من أن useReducer يقف الخطاف كأداة فعالة لإدارة الحالة ، فمن الضروري الاعتراف بالاختلافات والمفاضلات عند مقارنتها بحلول إدارة الحالة البديلة داخل النظام البيئي React.

useState

ال useState يكفي الخطاف لإدارة الحالات البسيطة والمعزولة داخل المكون. تركيبها أكثر إيجازًا ووضوحًا مقارنةً بـ useReducer. ومع ذلك ، بالنسبة للتحولات المعقدة للحالة أو الحالة ، useReducer يوفر نهجًا أكثر تنظيماً.

إعادة

تمثل Redux مكتبة إدارة حكومية بارزة لتطبيقات React. تلتزم بنمط مخفض مماثل مثل useReducer، ولكنه يوفر ميزات إضافية مثل المتجر المركزي ودعم البرامج الوسيطة وتصحيح أخطاء السفر عبر الزمن.

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

واجهة برمجة تطبيقات السياق

تتيح واجهة برمجة تطبيقات السياق الخاصة بـ React مشاركة الحالة عبر مكونات متعددة دون اللجوء إلى الحفر الداعم. بالتزامن مع useReducer، يمكن أن تسفر عن حل إدارة مركزية للدولة.

في حين أن الجمع بين السياق API و useReducer يفتخر بقوة كبيرة ، فإنه قد يقدم تعقيدًا إضافيًا عندما يقترن باستخدام مخفض الاستخدام في عزلة.

يتم استخدام واجهة برمجة تطبيقات السياق بشكل أفضل عندما تكون هناك ضرورة لمشاركة الحالة وسط مكونات متداخلة بعمق أو عند مواجهة تسلسل هرمي للمكونات المعقدة. يتوقف اختيار حل إدارة الدولة المناسب على المتطلبات المحددة للتطبيق المطروح.

للمشاريع ذات الحجم المتوسط ​​، useReducer يمكن أن يثبت أنه بديل فعال وأبسط لـ Redux أو واجهة برمجة تطبيقات السياق.

إطلاق العنان لبساطة إدارة الدولة

يقف الخطاف useReducer كأداة فعالة لتبسيط إدارة الحالة داخل تطبيقات React. من خلال الالتزام بمبادئ نمط المخفض ، فإنه يوفر نهجًا منظمًا وقابلًا للتطوير للتعامل مع التحولات المعقدة للحالة والحالة.

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