7.7 ניהול סטייט Zustand תרגול
תרגול - ניהול סטייט - Zustand¶
תרגיל 1 - Store בסיסי - רשימת משימות¶
צרו store של רשימת משימות עם Zustand.
דרישות:
- Store עם: todos, filter (all/active/completed)
- פעולות: addTodo, toggleTodo, removeTodo, editTodo, setFilter, clearCompleted
- ערכים נגזרים: filteredTodos (לפי הפילטר הנוכחי), stats (total, active, completed)
- צרו קומפוננטות נפרדות: TodoInput, TodoList, TodoItem, TodoFilters, TodoStats
- כל קומפוננטה מאזינה רק לנתון שהיא צריכה (selectors)
תרגיל 2 - Store עם Persist¶
צרו אפליקציית הערות (Notes) עם שמירה ב-localStorage.
דרישות:
- כל הערה: id, title, content, color, createdAt, updatedAt
- פעולות: create, update, delete, search, sort
- שמירה אוטומטית ב-localStorage עם persist middleware
- אפשרות לבחור צבע רקע להערה
- חיפוש בכותרת ובתוכן
- מיון לפי תאריך יצירה או עדכון
- תצוגת Grid או List (שמירת העדפה ב-persist)
תרגיל 3 - Store עם Immer¶
צרו store לניהול פרויקט עם state מקונן ומורכב.
דרישות:
- מבנה state: פרויקטים, כל פרויקט מכיל: boards, כל board מכיל: columns, כל column מכילה: tasks
- פעולות: הוספת/מחיקת פרויקט, הוספת/מחיקת board, הוספת/העברת/עריכת/מחיקת task
- השתמשו ב-immer middleware לעדכונים נוחים של state מקונן
- צרו ממשק Kanban בסיסי שמציג boards עם columns ו-tasks
תרגיל 4 - Store עם Slices¶
צרו אפליקציית חנות עם store מפוצל ל-slices.
דרישות:
- Auth Slice: user, token, login, logout, isAuthenticated
- Products Slice: products, loading, error, fetchProducts, searchProducts
- Cart Slice: items, addItem, removeItem, updateQuantity, total, clearCart
- UI Slice: theme, sidebarOpen, notifications, toggleSidebar, toggleTheme
- חברו את כל ה-slices ל-store אחד
- הוסיפו devtools middleware
- הדגימו אינטראקציה בין slices (למשל, logout מנקה את הסל)
תרגיל 5 - Store עם DevTools ובדיקות¶
צרו store שמשתמש ב-devtools ותכתבו בדיקות.
דרישות:
- Store פשוט לניהול משימות
- הוסיפו devtools middleware עם שמות actions
- כתבו בדיקות יחידה (unit tests) ל-store: בדיקת state התחלתי, בדיקת כל action, בדיקת ערכים נגזרים
- השתמשו ב-getState לבדיקות (לא צריך רנדר)
תרגיל 6 - השוואת Context מול Zustand (מתקדם)¶
ממשו את אותה אפליקציה פעמיים - פעם עם Context + useReducer ופעם עם Zustand.
דרישות:
- אפליקציית ניהול אנשי קשר: CRUD, חיפוש, מיון, מועדפים
- מימוש ראשון: Context + useReducer
- מימוש שני: Zustand
- השוו: כמות הקוד, קריאות, ביצועים (כמה רנדרים בכל שינוי)
- הוסיפו console.log בכל קומפוננטה כדי לספור רנדרים
- תעדו את ההבדלים והמסקנות
שאלות¶
- מה היתרון של selectors ב-Zustand לעומת useContext שמחזיר את כל ה-state?
- למה Zustand לא צריך Provider? איך ה-store זמין בכל הקומפוננטות?
- מה ההבדל בין set() עם אובייקט לבין set() עם פונקציה ב-Zustand?
- מתי כדאי לפצל store ל-slices ומתי עדיף store אחד?
- איך Zustand מתמודד עם state אסינכרוני (למשל, fetch מ-API)?