7.3 קונטקסט ו useReducer תרגול
תרגול - קונטקסט ו-useReducer - Context and useReducer¶
תרגיל 1 - קונטקסט ערכת נושא מתקדם¶
צרו מערכת ערכת נושא (Theme) מלאה עם קונטקסט.
דרישות:
- תמיכה בשלוש ערכות נושא: בהיר, כהה, ומערכת (לפי העדפת המערכת)
- שמירת ההעדפה ב-localStorage
- קונטקסט שמספק: theme, setTheme, colors (אובייקט עם צבעי הנושא הנוכחי)
- צרו קומפוננטות Button, Card ו-Input שמשתמשות בקונטקסט לעיצוב
- צרו דף הגדרות שמאפשר לבחור ערכת נושא
תרגיל 2 - ניהול התראות עם useReducer¶
צרו מערכת התראות (Notifications) עם useReducer.
דרישות:
- טיפוסי התראות: success, error, warning, info
- כל התראה מכילה: id, type, message, ו-duration (אופציונלי)
- פעולות: הוספת התראה, הסרת התראה, ניקוי כל ההתראות
- התראות נעלמות אוטומטית אחרי duration (ברירת מחדל 5 שניות)
- הציגו את ההתראות בפינה העליונה של המסך
- עטפו הכל בקונטקסט כדי שכל קומפוננטה תוכל להוסיף התראות
תרגיל 3 - סל קניות מלא¶
צרו מערכת סל קניות מלאה עם Context + useReducer.
דרישות:
- פעולות: הוספת מוצר, הסרת מוצר, עדכון כמות, החלת קוד קופון, ריקון הסל
- ה-state מכיל: items, total, discount, couponCode
- הקופון מעניק הנחה של 10%
- שמרו את הסל ב-localStorage (שימור בין רענונים)
- צרו קומפוננטות: ProductGrid, CartDrawer (סל צדדי), CartBadge (מספר פריטים)
- הוסיפו סיכום הזמנה עם מחיר לפני ואחרי הנחה
תרגיל 4 - מערכת אותנטיקציה¶
צרו מערכת אותנטיקציה מלאה עם Context + useReducer.
דרישות:
- מצבים: idle, loading, authenticated, error
- פעולות: login, logout, register, updateProfile
- שמירת טוקן ב-localStorage
- בדיקת טוקן בטעינה ראשונה (אתחול אוטומטי)
- צרו: טופס התחברות, טופס הרשמה, דף פרופיל, כפתור התנתקות
- קומפוננטת ProtectedRoute שמפנה לדף התחברות אם המשתמש לא מחובר
תרגיל 5 - מערכת רב-לשונית - Internationalization¶
צרו מערכת תרגום עם קונטקסט.
דרישות:
- תמיכה בשלוש שפות: עברית, אנגלית, ערבית
- קונטקסט שמספק: locale, setLocale, t (פונקציית תרגום), dir (rtl/ltr)
- אובייקט תרגומים מאורגן לפי שפה ומפתח
- שמירת העדפת שפה ב-localStorage
- צרו דף עם תוכן מתורגם, תפריט ניווט וכפתור החלפת שפה
- כיוון הטקסט (RTL/LTR) משתנה בהתאם לשפה
תרגיל 6 - מנהל משימות מתקדם (מתקדם)¶
צרו אפליקציית ניהול משימות עם Context + useReducer.
דרישות:
- ה-state מכיל: משימות, פילטרים, מיון, ומשתמש
- כל משימה: id, title, description, status (todo/in-progress/done), priority (low/medium/high), assignee, dueDate
- פעולות: CRUD מלא, שינוי סטטוס (drag-like), סינון לפי סטטוס/עדיפות/assignee, מיון
- פצלו את הקונטקסט לשניים: TasksContext (נתונים) ו-TasksDispatchContext (פעולות)
- הוסיפו Undo לפעולת מחיקה (שמירת משימה אחרונה שנמחקה)
- הציגו את המשימות בתצוגת Kanban (שלוש עמודות לפי סטטוס)
שאלות¶
- מה קורה כשמשנים את הערך של קונטקסט? אילו קומפוננטות עוברות רנדר מחדש?
- למה מומלץ לפצל קונטקסט גדול למספר קונטקסטים קטנים?
- מה היתרון של useReducer על פני מספר קריאות ל-useState כשיש state מורכב?
- האם dispatch של useReducer צריך להיות עטוף ב-useCallback? למה?
- מהן המגבלות העיקריות של Context + useReducer לעומת פתרון ניהול state חיצוני כמו Zustand?