יצירת Global State בתוך MobX
state (גרירה ב-Visual Studio Code) ופותחים בה תיקיית MobX. ההעברה נבדקה: אין שגיאות והאתר עדיין עובד. בפרויקט אמיתי בוחרים רק טכניקה אחת. ה-State של Redux נשאר כמו שהוא ולא מערבבים אותו עם MobX.GroceryItemModel ב-TypeScript עם name (איזה פריט) ו-amount (כמה). הכלי ליצירת קומפוננטות לא הצליח ליצור מודל, ולכן הוא נוצר ידנית.GroceryListState.ts מייצאים class GroceryList עם items מסוג אוסף של GroceryItemModel, שמתחיל כמערך ריק.const groceryList = new GroceryList() מיוצא החוצה, וגם המחלקה מיוצאת. מחלקה מתחילה באות גדולה ומשתנה באות קטנה.פרקי ההרצאה: יצירת Global State בתוך MobX
תמלול ההרצאה: יצירת Global State בתוך MobX
הטקסט המלא של הדקות הראשונות בהרצאה «יצירת Global State בתוך MobX» בקורס הווידאו של PracticU – כתוביות בעברית עם זמן התחלה לכל פסקה. כך תוכלו לקרוא ולחפש את הנושאים לפני שמתחילים ללמוד.
בואו נצלול לתוך הקוד ונראה איך אנחנו מיישמים שימוש במוביקס. דבר ראשון יש לנו פה גם את רידאקס והולך להיות לנו גם תיקייה של הסטייט של מוביקס.
כמובן לא מומלץ לעשות את זה בפרויקט אמיתי את שניהם, בוחרים טכניקה אחת והולכים איתה. אני כרגע רוצה לפתוח איזושהי תיקייה אחת שנקראת סטייט.
כל התיקיות שקשורות לסטייט אני אכניס בתוכה, קצת ריסקי האמת בואו ניקח את תיקיית רידאקס נגרור אותה לסטייט נגיד לו move נקווה שוויז'ואל סטודיו עשתה כמו שצריך את ההעברה הזאת בואו נראה רגע כאן אני רואה שאין לי שגיאות בואו ננסה לראות באחד הקומפוננטות אם הצליחה להתמודד הנה פה אני רואה שהצליחה להתמודד עם זה יפה דווקא
אם ויז'ול סטודיו לא מצליחה לעשות את זה אז הייתי מחזיר ומנסה עוד פעם או שפשוט הולכים ומתקנים את הנתיבים השונים שעכשיו כמובן הם נתיבים שונים. בוא נראה רגע אם האתר עדיין רץ נרפרש אותו נביא את המוצרים נראה שיש לנו פה אתר עובד כן בסדר ההזזה הזאת של התיקייה קצת הייתה ריסקית אבל זה הצליח.
אז הלכתי לתיקייה של הסטייט, פתחתי גם תיקייה עבור מוביקס ובתוך מוביקס אנחנו רוצים לבנות לעצמנו איזשהו גלובל סטייט ובכוונה אני לא רוצה לגעת או להשתמש בגלובל סטייט שהיו ברידאקס.
כל מה שעשינו ברידאקס זה היה מעולה, אני משאיר אותו as is, אני לא מערבב אותו עם מוביקס כי רידאקס מטפל בו כמו שצריך. אני רוצה להראות דוגמה נפרדת וחדשה לגמרי של איזשהו גלובל סטייט אחר לגמרי שאותו אנחנו ננהל על ידי מוביקס ומה שאנחנו הולכים לבנות זה בעצם רשימת מכולת כל הפרויקט שלנו מתעסק במוצרי מזון אז בוא נניח שפיצ'ר נוסף שהאתר הזה מספק זה האפשרות של המשתמש לערוך איזושהי רשימת מכולת בשבילו בשביל לדעת מה
לקנות במכולת. כמובן מוצרי מזון, ובגלל שהולכות להיות לנו כמה קומפוננטות שמתעסקות עם זה, מן הסתם אנחנו רוצים לשים את הרשימה הזאת באיזשהו אזור גלובלי אחד.
אז אני אבנה כרגע grocery list state type script. הנה יש לי פה רשימת מכולת, כרגע אני בונה את ה-state בלבד, את הדאטה.
בואו נבצע export class grocery list, רשימת מכולת ובתוך רשימת המכולת אנחנו רוצים את הפריטים עצמם הפריטים עצמם כמובן שהם מכילים דאטה ואנחנו רוצים איזשהו דאטה שמהווה מודל אז בואו נלך למודלים ונוסיף איזשהו מודל שמייצג דאטה למה אנחנו צריכים מודל אם רשימת המכולת הייתה רק סטרינגים נניח אנחנו רוצים לקנות לחם וירקות ופירות וכולי
מכרוזות לא הייתי בעצם צריך מודל אבל אני בכוונה רוצה לראות מה קורה כשהדאטה שלנו הוא קצת יותר מורכב מסתם מכרוזות ומן הסתם זה מודל כלשהו אגב הכלי הזה שמאפשר לנו להוסיף קומפוננטות יכול להוסיף גם מודלים בואו ננסה להוסיף מודל עם הכלי הזה קריאי מודל נקרא