הבנת Zustand
ניהול state מרגיש לעיתים קרובות מורכב מדי.
אתם יודעים איך להשתמש ב-React useState. אתם יודעים איך להעביר props. אתם יודעים איך להעלות state למעלה.
אבל הכל נשבר כשהאפליקציה שלכם גדלה. אתם מתחילים להעביר נתונים דרך רכיבים שלא זקוקים להם. זה נקרא prop drilling. זה הופך את הקוד שלכם למבולגן וקשה לתחזוקה.
Zustand פותר את זה. הוא מעניק לאפליקציה שלכם state משותף מחוץ לרכיבי ה-React שלכם.
תחשבו על זה ככה:
בלי Zustand: רכיב A מעביר props ל-B, B מעביר props ל-C, ו-C מעביר props ל-D.
עם Zustand: כל רכיב מדבר ישירות עם store מרכזי. בלי מתווכים. בלי prop drilling.
Zustand store מורכב משני דברים:
- State: הנתונים שלכם.
- Actions: פונקציות שמשנות את הנתונים שלכם.
זה כל מה שזה.
Zustand מהיר כי הוא מרנדר מחדש רק את הרכיבים שמשתמשים בנתונים הספציפיים שהשתנו.
אם אתם רוצים שהנתונים שלכם יישמרו גם לאחר רענון דף, השתמשו ב-localStorage. מכיוון ש-localStorage שומר מחרוזות בלבד, עליכם להשתמש ב-JSON.stringify כדי לשמור אובייקטים וב-JSON.parse כדי לקרוא אותם.
הנה דרך פשוטה לבנות מבנה של auth store:
- שמרו את המשתמש וה-token ב-localStorage.
- השתמשו בפונקציית login כדי לעדכן את ה-store ואת אחסון הדפדפן.
- השתמשו בפונקציית logout כדי לנקות את שניהם.
איך זה משתווה ל-Redux?
Redux דורש dispatchers ו-reducers. זה כרוך בהרבה קוד boilerplate. Zustand מאפשר לכם לקרוא לפונקציה ישירות. יש לו פחות עומס קוגניטיבי (mental overhead) ופחות הגדרות (setup).
טעויות נפוצות שכדאי להימנע מהן:
- שכחה להחזיר אובייקט בפונקציית ה-create. השתמשו בסוגריים מסביב לאובייקט שלכם.
- שימוש בנקודה-פסיק בתוך אובייקט ה-state. השתמשו בפסיקים במקום.
- ניתוח (parsing) של נתונים שהם כבר מחרוזת.
ספריות לניהול state לא עוסקות בניהול ה-state עצמו. הן עוסקות בניהול המורכבות.
תפסיקו לנסות לשנן כל API. התחילו להסתכל על הבעיה שהכלי מנסה לפתור. כשמבינים את הבעיה, הכלי הופך למובן מאליו.
מקור: https://dev.to/chinwuba_jeffrey/understanding-zustand-2g11