ניהול סטייטים גלובליים בקלות ב-React עם Zustand
לנהל סטייטים גלובליים ב-React מעולם לא היה פשוט יותר! במדריך זה נלמד איך להשתמש ב-Zustand, כלי קליל ויעיל שמאפשר שמירה ב-storage, חיבור לפונקציות אסינכרוניות, ושימוש בסטייט מחוץ לקומפוננטות. כל זה, בלי מורכבות מיותרת.
ניהול סטייטים גלובלים בקלות בריאקט - האומנם? 🤠 (לא היתה לי כותרת יותר מוצלחת) מה זה? 🥳 כשנרצה לחלחל מידע לכל האתר או לחלקים ממנו בלי לעשות פרופ דרילינג (בעברית סגסוגת מקרידה), לדוגמא להעביר את פרטי המשתמש המחובר למען שכל האתר ידע מיהו זה ואיזה הוא. האופציות: 🦄 ריאקט החמודים נתנו לנו את context api 🧩 שיש לו חסרונות משלו (קצת ביצועים) ויתרונות משלו. והשטן עצמו יצר לנו את redux 😈. תרגעוווו אני צוחקקקק - החיסרון העיקרי ברידאקס זה העודף מורכבות שלו, נהדר לאתרים גדולים, אבל לפרויקטים קטנים זה מרגיש כמו להרוג יתוש עם גרזן. ויש לנו את הדובון המגניב zustand 🐻. יתרונות: 👍 1. קלילות - ללא צורך באיתחול מיוחד או ב"לעטוף" את כל האתר בprovider. 2. חיבור לשרת - ניתן להוסיף פונקציות אסינכרוניות. 3. גלובליות - ניתן להשתמש (בסינטקסט טיפטיפה שונה) גם מחוץ לקומפוננטות - לדוגמא בפונקציות עזר חיצוניות. 4. עקביות, זיכרון או כותרת אחרת - ניתן להגדיר לו בקלות לשמור נתונים בstorage כדי לשמור על מידע גם אחרי רענון. דוגמא: 😎 כולל שמירה בstorage (persist) ושימוש מחוץ לקומפוננטות כאן:
https://github.com/yosefus/animals-store-client/blob/master/src/components/theme.tsxוזה התוצאה: 👍
https://animals-store-client.vercel.app/שתף את המאמר
נכתב על ידי
Yosefus Flavius
מתכנת מוכשר בחסד עליון ככה אומרים עלי כולם - לפחות בפרצוף שלי, אני אוהב ומעולה בלטייל ולתכנן טיולים בעיקר במדינות מגניבות, ואני צלם חובב כבר מעל 10 שנים.
עקבו באינסטגרם