1) הדגמה חיה: ניהול State מרוכז

בדוגמה זו, אנו משתמשים ברינדור מותנה כדי להחליף בין כפתור ה-Clear ל-Reset בהתאם לאורך הרשימה.

2) איך זה עובד? (Dispatch)

ב-useReducer, אנו לא משנים את הערך ישירות. אנו משגרים (Dispatch) פעולה שמסבירה מה ברצוננו לעשות. אובייקט ה-Action כולל type (מה הפעולה) ו-payload (מידע נוסף, כמו ID של משתמש).

// דוגמה למשלוח פעולה להסרת פריט
const removeItem = (id) => {
  dispatch({ type: 'REMOVE_ITEM', payload: { id } });
};

3) פונקציית ה-Reducer

זוהי "תחנת הכוח" של ה-Hook. היא מקבלת את ה-State הישן ואת ה-Action, ומחזירה State חדש לגמרי. חשוב לזכור: ה-Reducer חייב תמיד להחזיר State, אחרת האפליקציה תישבר.

const reducer = (state, action) => {
  if (action.type === 'REMOVE_ITEM') {
    // פילטור הרשימה והחזרת אובייקט חדש המכיל את המערך המעודכן
    const newPeople = state.people.filter(p => p.id !== action.payload.id);
    return { ...state, people: newPeople };
  }
  
  if (action.type === 'CLEAR_LIST') {
    return { ...state, people: [] };
  }

  // זריקת שגיאה במקרה של פעולה לא מוכרת עוזרת באיתור באגים
  throw new Error(`No matching "${action.type}" action type`);
};

4) ארגון קבצים (Best Practices)

כדי לשמור על קוד נקי, מומלץ לפצל את ה-useReducer לשלושה קבצים:

• actions.js: קובץ המכיל קבועים (Strings) של שמות הפעולות.
• reducer.js: קובץ המכיל את פונקציית הלוגיקה בלבד.
• page.jsx: הקומפוננטה המציגה את ה-UI ומשתמשת ב-dispatch.