PracticU

רידקס - הוספת AppState נוסף - קורס React

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

רידקס - הוספת AppState נוסף - קורס React

בשיעור זה אנו בונים State נוסף עבור העובדים, מקביל ל-State של המוצרים, ורואים כיצד כל התשתית שלמדנו לבנות בהדרגה מתבצעת כעת במהירות רבה כאשר כל הנוהל כבר ידוע.
נושאי הסיכום המוצגים בשיעור:
1. המטרה של השיעור: בניית AppState נפרד עבור העובדים, שיהיה מקביל ל-State של המוצרים או נפרד ממנו לחלוטין, מכיוון שבהמשך נשלב בין מספר States בתוך Redux.
2. מה האפליקציה צריכה: האפליקציה מתעסקת במוצרים ובעובדים, כאשר מידע מסוים כמו תהליך אחר אינו נדרש בכל רחבי האפליקציה, ולכן בוחרים לבנות State עבור העובדים בדיוק כפי שבנינו עבור המוצרים.
3. חמשת מרכיבי התשתית: לכל נושא שרוצים לנהל ב-Redux נדרשים אובייקט State, מזהי פעולות, ממשק Action, פונקציות יצירת Action ו-Reducer, ואלה חמשת הדברים שצריכים להיות מוגדרים.
4. בנייה לפי הצורך בלבד: אין חובה לבנות תמיד את כל סוגי הפעולות של הוספה, עדכון, מחיקה והגדרת הכול, אלא בונים רק את מה שהאפליקציה באמת צריכה, ולעובדים שלנו יש צורך בפעולה אחת בלבד, הכנסת כל העובדים מהשרת.
5. בניית ה-State והפעולות: מגדירים מחלקת State שמכילה אוסף עובדים, מזהה פעולה יחיד בשם הכנסת כל העובדים ששווה למחרוזת בעלת אותו השם, וממשק Action שה-Type שלו מסוג המזהים וה-Load שלו הוא אוסף העובדים, כאשר אפשר גם להשתמש ב-Type כלשהו במקום ה-Type המדויק.
6. Action Creator ו-Reducer: פונקציית יצירת הפעולה מקבלת את אוסף העובדים ומחזירה אובייקט ליטרלי עם ה-Type וה-Load, וה-Reducer מקבל את ה-State הנוכחי, שמאותחל בפעם הראשונה כ-State ריק של עובדים, ואת ה-Action, משכפל את ה-State הנוכחי ומבצע מבנה החלטה על סוג הפעולה.
7. הפעולה היחידה שמומשה: בענף של הכנסת כל העובדים מציבים את ה-Load, שהוא מערך העובדים, בתוך ה-State החדש, ולא לשכוח לסיים את הענף כראוי, ובעתיד אם יתווספו פעולות נוספות יתווספו גם ענפים נוספים.
לסיכום, בשיעור זה בנינו במהירות State שני עבור העובדים לפי כל הנוהל שלמדנו, הבנו שבונים רק את הפעולות שהאפליקציה דורשת ובמקרה זה פעולה אחת של הכנסת כל העובדים, ובכך הכנו את הקרקע לשילוב של מספר States בתוך Redux, כשבשיעור הבא נבנה סוף סוף את ה-Store עצמו. SR12658HE

פרקי ההרצאה: רידקס - הוספת AppState נוסף - קורס React

  1. 00:00

    בניית Application State נוסף

  2. 00:54

    AppState של עובדים

  3. 01:31

    חמשת רכיבי התשתית

  4. 02:07

    בניית רק מה שצריך

תמלול ההרצאה: רידקס - הוספת AppState נוסף - קורס React

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

  1. 00:02

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

  2. 00:31

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

  3. 00:54

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

  4. 01:30

    או של מידע שיש בתוך התשתית הזאת, זה יהיה מאוד קל ומאוד מהר לבנות את זה. שימו לב, אנחנו רוצים לבנות את העובדים, אז אמרנו, יש לנו ככה state, או ליתר דיוק upstate שקשור לעובדים, צריך להיות לנו action type,

  5. 01:51

    צריך להיות לנו action, צריך להיות לנו action creators וצריך להיות לנו reducer. אלה חמשת הדברים שצריכים להיות לנו בתשתית הזאת.

  6. 02:01

    דבר נוסף שחשוב לציין, אנחנו לא צריכים כל הזמן לבנות את כל מה שניתן לעשות. Add, Update, Delete ו-Set All.

  7. 02:10

    אם אנחנו צריכים, אנחנו בונים את זה. אם אנחנו צריכים יותר דברים, אז אנחנו צריכים לבנות את היותר דברים. אבל אם אנחנו צריכים פחות, אנחנו צריכים לבנות פחות, רק מה שאנחנו צריכים.

  8. 02:21

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

  9. 02:37

    זה אומר שרק זה צריך להיות לנו עבור העובדים, הכנסה של כל העובדים. אז בואו תסתכלו כמה זה פשוט לבנות הכל. upstate, אז יש לנו export class employees state.

  10. 02:52

    יש לנו פה את כל העובדים שלנו, employees מסוג employee model collection. חל במערך רקע.

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

ההרצאה הקודמת: רידקס - הפעלה ראשונה של AppState - ריאקט

ההרצאה הבאה: יצירת Store ב-Redux

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

  • הוספת VMkernel
  • הסבר נוסף על SSH
  • צירוף 2019 DC נוסף לדומיין - חלק 1
  • הוספת Request לטסט

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

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