שימוש ב-MobX Actions
groceryList, ומשתמשים בו כסוג ה-props.observer: כך הקומפוננטה קולטת שינויים.useForm עם register ו-handleSubmit. ערך ברירת המחדל של הכמות הוא 1, והוספת ולידציה נשארת לבחירתכם.props.groceryList.addItem עם הפריט שהתקבל. הפריט מופיע בטבלה מיד, בלי state בקומפוננטת הרשימה, כי ה-observer מעדכן את ה-props.setValue מאפסים את השם ואת הכמות ל-1.# ואייקון delete של Material UI. הפונקציה deleteHandler מקבלת אינדקס וקוראת ל-removeItem. ב-onClick כותבים arrow function שקוראת ל-deleteHandler עם האינדקס, כי אירוע לא מעביר אינדקס.clearHandler, והוא קורא ל-clearList. הפונקציה לא מקבלת פרמטרים, ולכן אפשר להעביר אותה ישירות.פרקי ההרצאה: שימוש ב-MobX Actions
תמלול ההרצאה: שימוש ב-MobX Actions
הטקסט המלא של הדקות הראשונות בהרצאה «שימוש ב-MobX Actions» בקורס הווידאו של PracticU – כתוביות בעברית עם זמן התחלה לכל פסקה. כך תוכלו לקרוא ולחפש את הנושאים לפני שמתחילים ללמוד.
אחרי שבנינו את אותם אקשנס בתוך הגלובל סטייט שלנו בואו נשתמש בהם ואנחנו משתמשים איתם מתוך הקומפוננטות כמובן. קודם כל אנחנו כבר לא צריכים את אלה כל זה אין לנו צורך מפני שאנחנו הולכים להוסיף את המידע בצורה של UI אז כרגע שמתי את זה בהערה עוד מעט אני כמובן אמחק את זה לגמרי.
מה שאנחנו רוצים לעשות אנחנו רוצים קודם כל ללכת לקומפוננטה שלנו אנחנו רוצים להשתמש עם זה נתחיל ב-Add Grocery Item ומה שנקרא לחבר בצורה נכונה את מוביקס לקומפוננטה. לחבר את מוביקס לקומפוננטה דורש שלוש פעולות פעולה ראשונה אנחנו מכינים props אז יש לנו פה אינטרפייס Add גרוסרי אייטם פרופס יש לו את הגלובל סטייט שאנחנו צריכים עבור אותה קומפוננטה כרגע יש לנו רק גלובל סטייט אחד שקשור למוביקס וזה
גרוסרי ליסט והסוג שלו זה גרוסרי ליסט בצורה כזאת וכמובן אנחנו מגדירים פה את הפרופס מסוג אד גרוסרי אייטם פרופס זאת הפעולה הראשונה פעולה שנייה אנחנו צריכים לשלוח את הפרופס מי שעושה את זה הוא כמובן ה-parent שלנו.
אנחנו הולכים לכאן ובדיוק מה שעשינו פה אנחנו גם עושים good ואותה הערה נעלמה. זאת פעולה מספר 2. פעולה מספר 3 זה להפוך את הקומפוננטה שלנו ל-Observer בכדי לקבל את השינויים.
Observer ואנחנו עוטפים על ידי אותו Higher Order Component את הקומפוננטה שלנו, עכשיו אנחנו יכולים גם לקלוט שינויים אם אנחנו צריכים. Good, אז חיברנו את הקומפוננטה שלנו כמו שצריך לתשתית המוביקס, כמו שמוביקס דורשת בעצם, ואם אנחנו רוצים להשתמש ב-Global State אנחנו עושים את זה על ידי אותו Props.
אז מה שאנחנו רוצים לעשות זה לבנות לעצמנו איזה שהוא פורם, בואו נעשה את זה כזה במהירות כי אנחנו כבר מכירים מה זה פורם יש לנו פה פורם ומה שאנחנו רוצים בפורם זה לייבל של אייטם ואנחנו רוצים את האינפוט טייפ טקסט עבור אותו אייטם עם איזה אוטו פוקוס אולי שיעלה ראשון אנחנו רוצים עוד לייבל של אמאונט ואנחנו רוצים תיבה input
type number כי amount זה מספר בואו נגדיר מינימום 1 נגדיר מקסימום אולי 100 לא הגיוני שיהיה יותר מ-100 בצורה כזאת ונגדיר לנו לחצן add אנחנו רוצים לשלב פה את נושא הטפסים אז יש לנו const use form שמתעסק עם סוג grocery item מודל בצורה כזאת ומביא לנו את register ומביא לנו את handle submit
ואנחנו רוצים כאן בתיבות להגדיר את טכניקת register ולהגיד שהתיבה הזאת מתעסקת עם name ואנחנו רוצים להגדיר שהתיבה הבאה מתעסקת עם amount. הנה ה-amount.
כמובן שחשוב שיהיה לנו ולידציה אבל אנחנו כבר מכירים את הנוהל אז אתם יכולים להוסיף בעצמכם ולידציה אם אתם רוצים on submit אנחנו רוצים handle submit ולשלוח איזושהי פונקציית submit שאנחנו רוצים לבנות פה אז הנה יש לנו פה function submit שמקבלת אייטם
grocery item model ואנחנו רוצים כאן לבצע את ההוספה קודם כל לפני שניגש להוספה עצמה אולי כדאי להוסיף קצת CSS לדבר הזה. אני חושב שיש לנו כבר איזשהו CSS, אולי זה שמטפל בטופס, אז אולי ניקח אותו גם כן ונשים אותו פה.
את זה נחליף ל-Add Grocery Item, מחק לי את זה. האמת שזה נראה לי שהוא כבר תמיד באמצע, אפשר להיפטר גם מאלה. פורם תופס לי את המרחב, בואו נראה איך זה נראה.
כמעט אמור להיות קצת באמצע אני חושב איך אנחנו נגדיר אותו שהוא יהיה באמצע אולי נגדיר כאן מרג'ין אאוטו אולי זה ישים לנו אותו באמצע כן שם לנו אותו באמצע גוד אז הנה יש לנו כבר את הcss של אותו טופס טופס מאוד פשוט בוא תמלא את האייטם תגדיר לי מה המאונט האמת המאונט אולי ניתן איזה דיפולט value של 1. כלומר בוא
ניתן איזה default שכבר על ההתחלה יש פה איזה שהוא 1 ואז יוזר לא צריך להכניס אם יש לו 1. Good אז אנחנו רוצים עכשיו אחרי שיש לנו את ה-UI מוכן להתחיל ולהשתמש קודם כל באקשן הראשון שבנינו add item מאיפה אנחנו רוצים לקרוא לו ברגע שיש לנו את ה-item.
add item מקבלת item מסוג grocery item model. יש לנו אותו בדיוק פה כשהיוזר מבצע סאבמיט הנה פה קיבלנו את האייטם אז שימו לב כמה זה פשוט props.
grocery list זה בעצם המשתנה גלובל סטייט שלנו אד אייטם זה האקשן שלנו הנה האייטם בוא תוסיף לי אותו ברגע שהוספנו אותו הוא כבר ידווח את השינויים כי הוא observable ואנחנו כבר אמורים לראות אותו בטבלה.
בואו נבדוק את זה. אז מה שאנחנו רוצים להכניס בואו נכניס כאן bread אחד add הנה אנחנו רואים אותו פה וכבר אני רואה שאנחנו צריכים לאפס את שני החבר'ה האלה אחרת היוזר סתם יכול ללחוץ הרבה.
בשביל לאפס אותם אנחנו צריכים כאן set value ולהשתמש עם set