شرح useReducer هو hook في React

- أكتوبر 17, 2024

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

لماذا تستخدم `useReducer`:

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

متى يصح استخدامه:

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

متى يجب التخلي عنه:

حالات بسيطة: إذا كانت حالتك بسيطة ولا تتطلب منطقًا معقدًا.
تعقيد غير ضروري: إذا كنت تستخدمه فقط لإدارة حالة يمكن معالجتها بسهولة باستخدام useState.

مثال مع شرح وتعليقات بالعربي

لنقم بإنشاء مثال يوضح كيفية استخدام useReducer لإدارة حالة نموذج بسيط يحتوي على حقول متعددة:

import React, { useReducer } from 'react';

// تعريف الدالة المخفضة (reducer)
const formReducer = (state, action) => {
switch (action.type) {
case 'UPDATE_FIELD':
return {
...state,
[action.field]: action.value
};
case 'RESET':
return action.initialState;
default:
return state;
}
};

const MyForm = () => {
// الحالة الأولية للنموذج
const initialState = {
name: '',
email: '',
message: ''
};

// استخدام useReducer لإدارة حالة النموذج
const [state, dispatch] = useReducer(formReducer, initialState);

const handleChange = (e) => {
const { name, value } = e.target;
dispatch({
type: 'UPDATE_FIELD',
field: name,
value: value
});
};

const handleReset = () => {
dispatch({
type: 'RESET',
initialState
});
};

return (
<form>
<div>
<label>Name:</label>
<input type="text" name="name" value={state.name} onChange={handleChange} />
</div>
<div>
<label>Email:</label>
<input type="email" name="email" value={state.email} onChange={handleChange} />
</div>
<div>
<label>Message:</label>
<textarea name="message" value={state.message} onChange={handleChange} />
</div>
<button type="button" onClick={handleReset}>Reset</button>
</form>
);
};

export default MyForm;

شرح الكود:

الدالة المخفضة (reducer): تتولى معالجة تحديثات الحالة بناءً على نوع الإجراء المرسل (UPDATE_FIELD أو RESET).
الحالة الأولية: تُحدد الحالة الأولية للنموذج، والتي تشمل الحقول name وemail وmessage.
استخدام useReducer: يستدعي useReducer الدالة المخفضة مع الحالة الأولية، ويعيد الحالة الحالية والدالة الموزعة (dispatch).
الدالة handleChange: تُحدث الحقول بناءً على إدخال المستخدم بإرسال إجراء UPDATE_FIELD.
الدالة handleReset: تُعيد الحالة إلى حالتها الأولية بإرسال إجراء RESET.

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

بحث هذه المدونة الإلكترونية

مدونة أحمد زعـــــــــكان