הדגמה של Reactions ב-MobX
reaction: הפונקציה הראשונה מחזירה את this.items.length, והשנייה מופעלת בכל פעם שהמספר משתנה. היא הופכת את this.items ל-JSON עם JSON.stringify ושומרת ב-localStorage במפתח grocery list, כי אפשר לשמור שם רק מחרוזות. בלשונית Application בכלי המפתחים רואים את המידע מתעדכן עם הוספה ומחיקה.autorun: כשהתוכנית עולה, קוראים את הפריט מ-localStorage ומכניסים ל-this.items את JSON.parse שלו. אם אין ערך, כמו בפעם הראשונה, מכניסים מערך ריק, כי null מסוכן לקריאה. אחרי רענון רגיל ו-hard refresh (Ctrl+F5) הפריטים חוזרים.when: התנאי הוא שמספר הפריטים גדול מ-10. אז מוצג alert, פעם אחת בלבד, ברגע שמתווסף פריט מספר 11. המרצה אומר שהוא לא בעד אלרטים בתוך state, ושזה רק להדגמה.loadItems, saveItems ו-displayAngryWifeAlert. כל אחת מוגדרת כ-arrow function.this שלה אינו ה-this של המחלקה, ולכן אין לו items. השגיאה לא מופיעה בקונסול. כשמוסיפים פונקציית כשל רואים אותה. הפתרון הוא להגדיר אותה כ-arrow function, כמו שהיה ב-React עם קומפוננטות.פרקי ההרצאה: הדגמה של Reactions ב-MobX
תמלול ההרצאה: הדגמה של Reactions ב-MobX
הטקסט המלא של הדקות הראשונות בהרצאה «הדגמה של Reactions ב-MobX» בקורס הווידאו של PracticU – כתוביות בעברית עם זמן התחלה לכל פסקה. כך תוכלו לקרוא ולחפש את הנושאים לפני שמתחילים ללמוד.
בואו נראה איפה אנחנו יכולים לשלב פה שימוש ב-reactions. אם אנחנו מוסיפים פריטים לרשימת מכולת שלנו אז אנחנו רואים אותם כאן והכל בסדר אבל יש פה איזושהי בעיה בלוגיקה של האתר הזה כל state שלנו זה סך הכל משהו שנמצא בזיכרון אם היוזר עכשיו יבצע refresh הכל נעלם.
כל מה שהוא עושה זה רק רפרש ונעלמו כל הפריטים. איך פתרנו את זה בעבר כשעבדנו עם רידאקס? שמרנו את המידע שלא רצינו שייעלם ברפרש ב-session storage וטענו אותו מחדש כשהאתר נוצר.
כאן נכון לבצע את זה על ידי reactions, אלו בדיוק הפונקציות שמאפשרות לנו לכתוב קוד שמתבצע בזמנים שונים. זאתי דוגמה אחת, תכף נראה עוד איזה דוגמה ליישום.
אז בואו ניגש בחזרה לקוד, את זה אפשר למחוק כמובן את כל הקודים האלה שעשינו ולחשוב מה אנחנו עושים ב-autorun, ב-reaction וב-when בכדי להבין שימוש נכון בהם.
ב-autorun אמרנו שאם היא לא קוראת את המידע של ה-obserable אז היא מתבצעת פעם אחת בלבד. ב-reaction אמרנו שהיא מתבצעת כל פעם שיש איזושהי החזרה של value שונה מה-value הקודם.
אז בואו נגדיר שreaction פשוט שומרת את המידע ל-local storage ברגע שהמידע השתנה ו-autorun טוענת אותו מה-local storage ברגע שהתוכנית עולה.
אז reaction אנחנו רוצים לבוא ולהגיד וואלה הנה יש לנו פה החזרה של Items.Length וכבר פונקציה ראשונה שמחזירה לנו את מספר הפריטים כל פעם כשהמספר יהיה שונה מהקריאה הקודמת לפונקציה אז הפונקציה הזאת תתבצע ובפונקציה הזאת מה שאנחנו רוצים לעשות זה to save the items אז בואו ניגש ונבנה לעצמנו
איזה JSON כי מה שאנחנו שומרים בתוך ה-session storage או ה-local storage יכול להיות רק סטרינגים אז ניקח ג'ייסון נלך ל-json.stringify נהפוך את this.items ל-json לאחר מכן ניגש ל-local storage.setitems ונגיד לו תשמע תייצר לי grocery list ותשמור לי את אותו ג'ייסון שכרגע יצרת.
אז הנה השימוש הראשון ב-reaction וכאן הוא אמור פשוט לשמור את זה ב-local storage. local storage לא נמחק כשהיוזר סוגר את הדפדפן, אז זאת תהיה רשימת מכולת מעולה כי אז היוזר כל פעם יכול לחזור אליה ולראות את הפריטים שבה.
בואו נשים את זה למטה בכדי לראות את זה אולי קצת יותר טוב. ניגש ל-application, ניגש ל-local storage ונתחיל לשמור פריטים. הנה Bread, והנה אנחנו רואים Grocery List שמור.
בואו נוסיף Fruits, שרה פירות, Go, והנה אנחנו רואים שני פריטים שמורים. בואו נוסיף Candies, והפעם נתפרע, 20 ממתקים, והנה אנחנו רואים את כל הפריטים נמצאים כאן.
בואו נבצע מחיקה, נמחק את ה-Bread, והנה אנחנו רואים שהוא מחוק. זאת אומרת, הפונקציה אוטומטית רואה שיש Change ב-Observable, ומתבצעת, ובייסיקלי הביצוע שלה זה לשמור את המידע העדכני בתוך ה-Local Storage.
אנחנו רוצים לבצע את הפעולה ההפוכה ב-Auto Run, ניפטר רגע מהקוד הזה, ואנחנו רוצים ל-load את האיטמס, בואו ניקח קונסט ג'ייסון, ניגש ל-Local Storage, נגיד לו עוד שמה, יש איזה פריט שנקרא Grocery List, תביא לי אותו,
זאת מחוזת. לאחר מכן, לדיס נקודה אייטמס ותכניס לתוכם את הפריט עצמו הפריט זה ג'ייסון הארס של הג'ייסון שהתקבל אבל בפעם הראשונה שהיוזר מכניס כאן יהיה נל אז אולי כדאי לבדוק סליחה פה יהיה נל אולי כדאי לבדוק האם יש לנו פה value אז נכניס אותו אם אין נכניס איזשהו מערך ריק
זה בעצם חוסך לנו איזשהו באג שאם אין לנו פריטים כי זו פעם ראשונה שאנחנו מריצים את האתר, אז שלא יכניס לתוכו נעל, כי נעל זה קצת ריסקי.
אם יש פה נעל, אז אי אפשר לקרוא ממש את המידע, אי אפשר לגשת לכל מיני ערכים, אנחנו תמיד רוצים להכניס לכאן מערך ריק. גוד.
בואו נבדוק שהוא עובד ומחזיר לנו את הפריטים בחזרה. אז אנחנו נרפרש, והנה אנחנו רואים את הפריטים חזרו.
בואו נוסיף עוד משהו, נוסיף האמת לחם חדש, שלוש ממנו, הנה אנחנו רואים אותו פה. בואו נרפרש, ואנחנו רואים שהוא חזר מה שמקודם נעלם חזר בחזרה בואו ננסה לרפרש בצורה כזאת חוזר בואו נעשה קונטרול F5 שזה Hard Refresh זה הרבה יותר חזק המידע חזר בחזרה ניפטר מה-20 קנדיז אנחנו רואים אותו אוטומטית מתעדכן כאן
נרפרש היוזר תמיד רואה את המידע האפשרות היחידה שלו זה או לנקות את ה-Local Storage או בעצם להיפטר מהמידע בצורה כזאת אז יש לו כרגע רשימת מכולת שהוא יכול לנהל באתר שלנו הנה עוד סיבה למה כדאי ליוזר להשתמש באתר בואו ניגש ל-when ובואו נגיד ל-when שאנחנו רוצים לבצע דבר כזה
אם מספר הפריטים עולה על 10 או גדול שווה ל-10 זה בעצם התנאי שלנו אז אנחנו רוצים שהוא יציג ליוזר איזשהו אלרט בוא נניח למרות שאני לא כל כך בעד להציג אלרטים ותצוגות במקומות של סטייט אבל רק לצורך הדוגמה בואו נציג איזה הודעה your Your grocery list contains more than 10
items, אז כן נגדיר פה גדול מ-10. More than 10 items, בואו נראה פה שורה. Please go now, so wife won't get angry. והנה יש לנו פה הודעה, לך מהר לקניות שהאישה לא תתרגז כי יש לך יותר מעשרה פריטים.
כמה פעמים הוא יציג לנו את האלרט הזה אז כמובן