PracticU

מה זה MobX - ריאקט

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

מה זה MobX - ריאקט
MobX היא ספרייה לניהול State ברמת האפליקציה, חלופה ל-Redux. ההרצאה מציגה את הרעיון ואת ארבעת המרכיבים שלה.
מה היא עושה
אל Redux ו-MobX לא משלבים יחד, כל פרויקט בוחר אחת. Redux פופולרית יותר ולכן נלמדה קודם, אבל MobX פשוטה יותר, וארגונים רבים משתמשים בה. היא מבוססת על Observables כדי לדווח על שינויים: קומפוננטה אחת משנה את ה-Global State, וכל קומפוננטה שמאזינה מקבלת עדכון.
ארבעת המרכיבים
1. Observables: הדאטה שרוצים לנהל, מוגדר כ-Observable. קומפוננטה שצופה בו נקראת Observer וקבלת את כל העדכונים אוטומטית.
2. Actions: פונקציות שמשנות את המידע.
3. Computed values: מאפייני קריאה בלבד שמתעדכנים אוטומטית כשמשהו משתנה. אפשר להציג אותם אבל לא לעדכן אותם.
4. Reactions: קוד שאנחנו כותבים, ורץ אוטומטית כשמתקיים תנאי שהגדרנו.
הבעיה שהיא פותרת
באפליקציה עם קומפוננטות מקוננות (ראשית, עגלת קניות, ועוד כמה) קומפוננטה עמוקה רוצה להוסיף פריט לעגלה. בלי ספריית State צריך להעביר אותו מעלה ומטה דרך props בקומפוננטות שלא צריכות אותו. עם Global State הקומפוננטה מוסיפה את הפריט לאוסף, וכל מי שמעוניין מקבל את העדכון.
הסרטונים הבאים יראו איך בונים כל אחד מארבעת המרכיבים.
השיעור הבא בקורס: יצירת Global State בתוך MobX

פרקי ההרצאה: מה זה MobX - ריאקט

  1. 00:00

    MobX לניהול Global State

  2. 00:41

    MobX מול Redux

  3. 01:18

    Observables ב-MobX

  4. 01:53

    computed values ו-reactions

תמלול ההרצאה: מה זה MobX - ריאקט

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

  1. 00:02

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

  2. 00:19

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

  3. 00:46

    לשימוש ויש לא מעט ארגונים שמשתמשים במוביקס ולא ברידקס אז חשוב לנו לזכור גם את זה ולראות איך בעצם משתמשים עם הספרייה הזאת אתם תכף תראו זה יותר פשוט מרידקס אז קודם כל מוביקס מסתמשת ב-Observables בכדי לבצע דיווח של שינויים בדומה ל-Redux, כאשר Observable שוב זה משהו שיודע להעלות אירוע ומישהו יכול להירשם לאירוע בכדי לקבל

  4. 01:14

    דיווחים. כל קומפוננט שיש לנו באפליקציה יכול לבצע שינויים על ה-Global State שאנחנו מגדירים ויכול להאזין גם לשינויים שמתבצעים על ידי קומפוננטות אחרות.

  5. 01:29

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

  6. 01:55

    computed values זה בעצם מאפייני read only כאלה שאנחנו יכולים רק לקרוא אותם שאומרים לנו שיש איזשהו שינוי או איזשהו חישוב מסוים שאנחנו יכולים לקרוא, והוא מכיל משהו שנקרא reactions, שאלו פונקציות שמתבצעות כתלות ב-conditions מסוימים, בתנאים מסוימים שאנחנו מגדירים,

  7. 02:17

    והן אוטומטית מתבצעות. שוב, בואו נסתכל על הבעיה שיכולה להיות באפליקציה מבוססת קומפוננטות. הנה יש לנו פה קומפוננט הראשית layout נניח, הירוקה, ובתוכה יש לנו קומפוננט הכחולה שמכילה,

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

ההרצאה הקודמת: יצירת תפריט לוגין בריאקט

ההרצאה הבאה: יצירת Global State בתוך MobX

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

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