تحكم فى الـ State زى المحترفين مع الـ useReducer

[x32x01]

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

في اللحظة دي بتبدأ تفكر إزاي تقدر تدير كل الـ state دي من غير ما الكود بتاعك يبقى شبكه من الـ useState...؟
هنا بالظبط بيجي دور الـ useReducer

طيب إيه الفايدة اللي بيقدمها useReducer؟​

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

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

طيب إيه اللي يخلي الـ useReducer أحسن من useState في الحالات الكبيره والمعقدة؟​

لو جينا نتكلم بشكل عملي هتلاقي إن الـ useState بيساعدك تدير حالة واحدة أو حالتين بشكل كويس لكن إيه اللي هيحصل لو بقي عندك عدد كبير من الحالات؟ هنا الـ useState هيبدأ يتعقد وهتلاقي نفسك محتاج حلول تقدر تتحكم في كل الحالات دي بشكل أسهل .

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

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

مثال للتوضيح:

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 بيساعد في ده بشكل كبير.
- لو فكرت بعد فترة تضيف ميزة جديدة للتطبيق زي حفظ الطلبات السابقة للمستخدمين، مش هتحتاج تضيف أكشنز في أماكن كتير، كل اللي عليك هو إضافة الأكشنز دي في مكان واحد في الـ reducer.
- لما تكون عندك حالات مرتبطة ببعض (زي ما ذكرنا في مثال المطعم: الطلب، الفلترة، الترتيب)، الـ useReducer بيسهل عليك إدارة العلاقة بين الحالات دي في مكان واحد من غير ما تتوه في التفاصيل.

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