הסבר על Reactions ב-MobX
makeObservable. שלוש הפונקציות הן autorun, reaction ו-when, וכל אחת מקבלת פונקציות.autorun: רצה פעם אחת כשה-constructor מופעל, גם אם הקומפוננטה לא מוצגת באותו רגע. אם בתוכה קוראים נתון מה-Observable, למשל this.items.length, היא רצה שוב בכל פעם שהנתון הזה משתנה. בלי קריאה כזו היא רצה פעם אחת בלבד.reaction: מקבלת שתי פונקציות. הראשונה מחזירה ערך, ורק כשהערך שונה מהקריאה הקודמת מופעלת השנייה. כשהוחזר Math.random() בלי קשר ל-items, הפונקציה השנייה לא רצה. כשהוחזר this.items.length היא רצה בכל הוספה. כשהוחזר this.items.length פחות this.items.length, כלומר תמיד 0, היא לא רצה.when: מקבלת שתי פונקציות. אם הראשונה מחזירה true, השנייה מופעלת פעם אחת בלבד, גם אם התנאי ימשיך להתקיים. עם false היא לא רצה אף פעם. עם התנאי של מספר פריטים זוגי, שהתקיים בהתחלה כי היו 0 פריטים, היא רצה פעם אחת ולא שוב.when אפשר להגדיר timeout ומה לעשות אם הקריאה נכשלת.פרקי ההרצאה: הסבר על Reactions ב-MobX
תמלול ההרצאה: הסבר על Reactions ב-MobX
הטקסט המלא של הדקות הראשונות בהרצאה «הסבר על Reactions ב-MobX» בקורס הווידאו של PracticU – כתוביות בעברית עם זמן התחלה לכל פסקה. כך תוכלו לקרוא ולחפש את הנושאים לפני שמתחילים ללמוד.
אנחנו מגיעים לפיצ'ר הרביעי שמוביקס מספקת ואלו ה-reactions. Reactions אלו פונקציות שאנחנו יכולים לכתוב, שמתבצעות אוטומטית במקרים מסוימים שאנחנו בעצם מגדירים, וכמובן הפונקציות האלה יכולות לבצע כל מיני פעולות על המידע.
פונקציות האלה נכתבות בתוך ה-state שלנו, והן נכתבות בתוך הקונסטרקטור, כלומר אנחנו מגדירים אותם בתוך הקונסטרקטור אבל לא בתוך הפונקציה make observable אלא ישירות כאן ולמעשה יש שלוש פונקציות כאלה פונקציה ראשונה נקראת auto run פונקציה שנייה נקראת reaction למרות ששלושתם נחשבות reaction זאת נקראת reaction פונקציה שלישית נקראת when וחשוב לנו להבין
מה ההבדלים בין שלושת הפונקציות האלה בסרטון הזה קודם כל נראה מתי כל אחת מתבצעת או מה הן עושות. אז auto run נתחיל איתה. auto run מתבצעת קודם כל פעם אחת כאשר, קוראים לה כאשר הקונסטרקטור מתבצע.
כלומר מה זה אומר מתבצעת? היא מקבלת פונקציה, כל אחת מהפונקציות האלה מקבלות פונקציה והשאלה מתי הפונקציה שלנו מתבצעת.
auto run מתבצעת קודם כל פעם אחת כשהיא מופעלת, שהקונסטרקטור מופעל זאת אומרת אם אנחנו פה נרשום איזה שהוא לוג ונרשום פה auto run בכדי לראות מתי auto run מתבצעת נחזור בחזרה נפתח f12 ומיידית נראה את auto run בוא ננקה ונרפרש והנה auto run זה לא משנה אם אנחנו נמצאים כאן בקומפוננטה הזאת כן או לא כן כי
הקונסטרקטור שלנו בכל מקרה התבצע הנה שוב פעם auto run התבצע ואנחנו בכלל לא רואים את הקומפוננטה אם אני אחזור כרגע לקומפוננטה ה auto run לא מתבצע עוד פעם.
בנוסף לזה שהוא מתבצע פעם אחת לראשונה הוא גם מתבצע כל פעם שאנחנו קוראים מידע של ה-Observable לא כותבים ל-Observable קוראים. אם לדוגמה אני אציג את מספר הפריטים item length אני רוצה לראות כמה פריטים יש לי.
ניגש ל-dis.items.length זה אומר שאני בעסיקלי קורא כמה פריטים קיימים ב-Observable הזה. אני קורא את המידע של ה-Observable. ברגע שאני נוגע ומשתמש ב-Observable לצורך קריאה, שוב פעם האוטורנט יתבצע כאשר ה-Observable משתנה.
אם אני אוסיף אליו פריט הוא ישתנה. בואו נראה את זה. קודם כל נחזור בחזרה ונגיע לגרוסרי ליסט שלנו, נרפרש שוב פעם בשביל לראות מההתחלה את המידע, והנה אוטוראן אייטם לנקף 0. נוסיף לחם ונראה מספר הפריטים הוא 1, אבל ברגע שאנחנו רואים את זה זה אומר שהאוטוראן
התבצעה. אוקיי, בואו נוסיף 5 פירות, גו, והנה האוטוראן שוב פעם התבצע כי אנחנו קוראים את המידע.
זה בעצם אוטוראן. שימו לב שאם לא היינו קוראים את המידע אז היא הייתה בכל מקרה מתבצעת אבל פעם אחת ויחידה. ריאקשן, בואו נראה מתי ריאקשן מתבצעת.
ריאקשן מקבלת שתי פונקציות וריאקשן אומרת דבר כזה אני קוראת לפונקציה הראשונה אם הפונקציה הראשונה מחזירה value אחר מהפעם הקודמת שקראתי לה אז אני מפעילה את הפונקציה השנייה.
בואו ניגש לפונקציה השנייה, בפונקציה השנייה נכתוב לעצמנו שאנחנו ב-outorun, נגדיר לוג שאנחנו ב-reaction, לא ב-outorun סליחה ב-reaction.
נבוא לכאן ונגדיר כאן שאנחנו מחזירים, בוא נניח שנחזיר מספר math random כלשהו, ואז בטוח שהוא יחזיר כל פעם value אחר. בואו נבדוק איך התוכנית הזאת מתנהגת. נרפרש, יש לנו כאן את auto run ונשפיע על ה-collection.
אנחנו לא רואים שיש קריאה ל-reaction. בואו ננסה להחזיר משהו שקשור ל-items שלנו.