PracticU

הוספת פונקציות ופעולות - MobX Actions

בלי כתוביותעם כתוביות
PracticU › קורס ריאקט - React › הוספת פונקציות ופעולות - MobX Actions
מילון מושגים:
פונקציה - קטע קוד בעל שם שמבצע משימה מוגדרת, מקבל ערכי קלט (פרמטרים) ויכול להחזיר תוצאה. מאפשרת לארגן קוד ולהשתמש בו שוב.
סטייט - המידע על מצבו הנוכחי של רכיב או אפליקציה בזמן נתון, שמשתנה ומשפיע על מה שמוצג.
אינדקס - מבנה במסד נתונים שמאיץ חיפוש ושליפה. גם מספר המציין מיקום של איבר במערך.
מערך - מבנה נתונים שמאחסן אוסף ערכים מאותו סוג ברצף, שאפשר לגשת אליהם לפי מספר מיקום (אינדקס).
קומפיילר - תוכנה שממירה קוד מקור שנכתב בשפת תכנות לקוד שהמחשב יכול להריץ, ומדווחת על שגיאות תחביר.
רכיב - יחידת בניין עצמאית וניתנת לשימוש חוזר בתוך מערכת או ממשק משתמש, שאחראית על חלק מוגדר מהתפקוד.

הוספת פונקציות ופעולות - MobX Actions
פעולות שמשנות את המידע ב-MobX נכתבות כפונקציות בתוך מחלקת ה-state, ונקראות Actions. כאן מוסיפים שלוש פעולות כאלה ומצהירים עליהן.
איך מגדירים Actions
1. הוספת פריט: פונקציה addItem שמקבלת פריט ולא מחזירה כלום, וקוראת ל-this.items.push.
2. הסרת פריט: פונקציה removeItem שמקבלת מספר אינדקס ומוחקת פריט אחד עם splice.
3. ניקוי הרשימה: פונקציה clearList ש-this.items מקבל בה מערך ריק חדש.
4. הצהרה ב-makeObservable: כמו ש-items הוגדר כ-observable, כל אחת משלוש הפונקציות מוגדרת כ-action.
שימו לב
- items הוא proxy, אבל מבחינת הקומפיילר זה מערך רגיל, ואפשר לעבוד איתו כרגיל. ההמרה ל-Observable קורה רק בזמן ריצה.
- גם בלי הגדרה כ-action דברים עשויים לעבוד, אבל לפי התיעוד של MobX צריך להגדיר. כך הפעולה מדווחת כמו שצריך וגם רצה ביעילות.
אחרי ההגדרה, קומפוננטה חיצונית שמפעילה את הפעולות תגרום ל-Observable לדווח על השינוי. השימוש בפועל מוצג בסרטון הבא.
השיעור הבא בקורס: שימוש ב-MobX Actions

פרקי ההרצאה: הוספת פונקציות ופעולות - MobX Actions

  1. 00:00

    הוספת Actions למחלקת הסטייט

  2. 00:40

    משתנה Proxy של MobX

  3. 01:28

    פונקציית remove item

תמלול ההרצאה: הוספת פונקציות ופעולות - MobX Actions

הטקסט המלא של הדקות הראשונות בהרצאה «הוספת פונקציות ופעולות - MobX Actions» בקורס הווידאו של PracticU – כתוביות בעברית עם זמן התחלה לכל פסקה. כך תוכלו לקרוא ולחפש את הנושאים לפני שמתחילים ללמוד.

  1. 00:02

    כעת אנחנו רוצים להוסיף אפשרות לבצע פעולות על הדאטה שלנו. זה מתבצע פשוט מאוד על ידי פונקציות שאנחנו מוסיפים למחלקת הגלובל סטייט. פונקציות האלה שמבצעות שינויים על המידע נקראות אקשנס.

  2. 00:23

    אנחנו יכולים להוסיף כמה פונקציות כאלה שבא לנו, כל אחת עושה איזשהו צ'יינג'. אז בואו נוסיף פונקציה שמוסיפה פריט חדש. אייטם היא מקבלת את אותו אייטם אנחנו לא מחזירים שום דבר כל מה שאנחנו עושים זה this.items.push והנה שימו לב למשהו מאוד מעניין אנחנו ראינו על הקונסול שהאייטמס זה משתנה

  3. 00:45

    פרוקסי כזה פרוקסי זה משהו ששייך לג'אווה סקריפט שהוא משתנה שכאילו מתייחס למשתנה אחר רפרנס למשתנה אחר אפשר לקרוא לו אבל מבחינתנו אנחנו עובדים איתו כאילו שזה מה שכתוב פה מבחינת הקומפיילר אייטמס זהו מערך גרוסרי אייטם מודל קולקשן כזה אין שום בעיה לעבוד איתו בצורה כזאת רק בזמן הריצה הספרייה הזאת מוביקס

  4. 01:20

    תהפוך אותו לאובזורבל על ידי הקונספט הזה שנקרא פרוקסי אבל אין שום בעיה לעבוד איתו כאילו שהוא מערך רגיל כל הפעולות האלה התבצעו כמו שצריך אז הנה פונקציה ראשונה add item הנה פונקציה שנייה remove item אולי אנחנו רוצים להסיר פריט מהרשימת מכולת שלנו בואו נגדיר שהוא מקבל index number לא מחזיר כלום ופשוט נמחק את הפריט this item זה מערך אז יש לו ספלייס תמחק לי

  5. 01:56

    בבקשה פריט מאינדקס שהתקבל ורק פריט אחד כזה

לקורס המלא: קורס ריאקט אונליין

ההרצאה הקודמת: הסבר על MobX - Observable

ההרצאה הבאה: שימוש ב-MobX Actions

הרצאות קשורות מקורסים אחרים

  • Actions on WebDriver
  • פונקציות למתקדמים
  • פונקציות - Functions (חלק 1)
  • פונקציות - Functions

קורסים נוספים במסלול

  • קורס יסודות HTML - בניית אתר אינטרנט פשוט
  • קורס CSS 3 - בדגש על Flex & Grid
  • קורס Javascript כולל JQuery
  • קורס ג'אווה סקריפט מעשי - JavaScript
  • קורס TypeScript
  • קורס NodeJS