הוספת Computed Values ב-MobX
totalItems: getter שמחזיר את מספר הפריטים, this.items.length. המרצה מסביר שעדיף לא לבצע חישובים מבחוץ, ושבהמשך יהיה חישוב מורכב יותר.totalAmount: getter שמסכם את הכמויות של כל הפריטים. משתמשים ב-reduce שמחבר את הסכום לכמות של כל פריט, עם ערך התחלתי 0, ומחזירים את התוצאה.makeObservable: כמו ש-observable ו-action, גם computed מגיע מ-MobX. מגדירים ש-totalItems ו-totalAmount הם computed.פרקי ההרצאה: הוספת Computed Values ב-MobX
תמלול ההרצאה: הוספת Computed Values ב-MobX
הטקסט המלא של הדקות הראשונות בהרצאה «הוספת Computed Values ב-MobX» בקורס הווידאו של PracticU – כתוביות בעברית עם זמן התחלה לכל פסקה. כך תוכלו לקרוא ולחפש את הנושאים לפני שמתחילים ללמוד.
הפיצ'ר הבא שקיים במוביקס הוא ה-computed values. ה-computed values אלו רופרטיב שמכילים גטר בלבד, כלומר הם read-only, אפשר רק לקרוא אותם, ומחזירים מידע חישובי לגבי הדאטה שלנו.
אם אנחנו רוצים לדעת כל מיני נתונים חישוביים לגבי המידע, אנחנו יכולים פשוט לכתוב אותם, ואוטומטית קומפוננטות יכולות לקרוא אותם ולהציג אותם.
בואו נבנה לעצמנו שניים כאלה. בואו נבנה פרופרטי על ידי גט, פרופרטי גטר נבנה על ידי גט, רווח, ובואו נגיד אחד נקרא total items.
אנחנו רוצים להחזיר כמה סך הכל פריטים יש לנו. זה מידע חישובי, אז סך הכל פריטים יהיה this.items.length. אתם יכולים להגיד, רקע, אוקיי, למה אי אפשר פשוט לפנות מבחוץ ל-items.length, אתם צודקים, אפשר ואולי אתם גם תראו את המידע.
אבל זה קצת יותר מקצועי, כי אני לא רוצה עכשיו להתחיל מבחוץ לבצע חישובים. תכף אתם תראו שאולי יש לנו פה חישוב יותר מורכב.
הפרופרטיז האלה פשוט יחזירו את המידע הזה, אבל לא רק יחזירו את המידע, אוטומטית כשיש שינוי אתם תקבלו את העדכון הזה מבחוץ. אז הנה יש לנו computed value ראשון, בואו נבנה עוד אחד, get ובואו נבנה total amount.
total amount זה בעצם סך כל ה-amounts שיש לנו. כל ה-amount זה בעצם הסכום של כל פריטי ה-items שיש לנו.
אז return this.items נקודה האמת בואו נעשה את זה בשני שלבים בואו נעשה קונסט נקרא לזה סאמרי this.items נקודה נשתמש ב-reduce בשביל