useReducer: إدارة State كبيرة بسهولة في React

تخيل معايا كده عندك تطبيق Task Management 📝، المستخدم بيضيف مهام جديدة، يعدل عليها، أو يحذفها. مع كل خطوة بيعملها، التطبيق محتاج يتعامل مع الـ state ويعدلها.

في البداية، الموضوع بسيط وبتستخدم useState لكل حالة، لكن كل ما التطبيق كبر، هتلاقي نفسك بتتعامل مع أكتر من حالة في نفس الوقت:

• حالة المهام
• حالة الفلترة
• حالة الترتيب

وهنا الموضوع بيبقى معقد 😅.

ليه نستخدم useReducer؟ 🤔​

مع useReducer:

• كل الأكشنز اللي بتحصل في التطبيق (زي إضافة task أو حذف task) بتمر على نفس المكان اللي هو الـ reducer function.
• بدل ما الحالات تكون متفرقة في كل مكان، كل حاجة بتعدي على نقطة واحدة بس، وده بيخلي الكود منظم وأسهل للصيانة.
• لو كنت بتستخدم useState لأكتر من حالة، هتلاقي نفسك بتكرر نفس الكود، لكن useReducer بيخلي كل الأكشنز تتعامل بنفس الطريقة.

متى useReducer أفضل من useState؟ ⚡​

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

مثال عملي: Counter صغير 🖥️​

1. استخدام useState:

import React, { useState } from 'react';

function Counter() {
const [count, setCount] = useState(0);

return ( <div> <p>Count: {count}</p>
<button onClick={() => setCount(count + 1)}>زيادة</button> </div>
);
}

export default Counter;

2. استخدام useReducer:

import React, { useReducer } from 'react';

const countReducer = (state, action) => {
switch (action.type) {
case 'INCREMENT':
return state + 1;
default:
return state;
}
};

function Counter() {
const [count, dispatch] = useReducer(countReducer, 0);

return ( <div> <p>Count: {count}</p>
<button onClick={() => dispatch({ type: 'INCREMENT' })}>زيادة</button> </div>
);
}

export default Counter;

ليه useReducer مناسب للتطبيقات الكبيرة؟ 📈​

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

الخلاصة 📝​

useReducer بيخليك تنظم الأكشنز والحالات في مكان واحد، ويوفر مجهود إدارة كل حاجة بشكل منفصل. لو التطبيق بتاعك بيكبر ومحتاج طريقة أحسن لإدارة الحالات، useReducer هيكون اختيارك المفضل 💪.
لو عندك سؤال أو استفسار، اكتب في الكومنتات 👇.