PracticU

רידקס - יצירת Action Types

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

רידקס - יצירת Action Types
בחלק הזה של התשתית של Redux מגדירים את סוגי הפעולות שאפשר לבצע על המוצרים, ומסבירים למה כדאי שהערכים שלהם יהיו מחרוזות ולא מספרים.
השלבים
1. enum: מגדירים enum ProductsActionType בשם ביחיד, גם אם הוא מתאר פעולות על רשימה.
2. הפעולות: AddProduct, UpdateProduct, DeleteProduct, ופעולה נוספת שמכניסה ל-Redux את כל המוצרים שירדו מהשרת, SetAllProducts (אפשר גם DownloadProducts או SaveProducts). פעולה כמו ClearProducts לא מגדירים כי האפליקציה לא צריכה אותה.
3. הבעיה עם מספרים: ב-enum ברירת המחדל היא מספר: 0, 1, 2, 3. אבל Redux מסתכל על הערך שנשלח אליה. אם בקובץ של עובדים יש enum דומה, AddProduct ו-AddEmployee יקבלו שניהם 0, ו-Redux תפעיל פעולות של שניהם.
4. הפתרון: מגדירים כל קבוע כמחרוזת, למשל AddProduct = "AddProduct". עדיין עובדים איתו כ-enum, אבל מאחורי הקלעים כל ערך ייחודי. אותו דבר ב-enum של העובדים: UpdateEmployee, DeleteEmployee ו-SetAllEmployees.
5. בונוס בדיבאג: בקונסול רואים AddProduct במקום 0, וזה קל יותר להבנה.
שימו לב
הערכים חייבים להיות שונים בין כל ה-enums בכל חלקי ה-state באפליקציה. אחרת פקודה אחת תפעיל פעולות לא רצויות בכמה מקומות.
אחרי ההרצאה מוכן החלק של סוגי הפעולות, והמשך הסדרה בונה את ה-Action עצמו.
השיעור הבא בקורס: רידקס - יצירת Action

פרקי ההרצאה: רידקס - יצירת Action Types

  1. 00:00

    מהו Action Type ברידאקס

  2. 00:56

    הגדרת הפעולות על המוצרים

  3. 01:52

    בעיית ערכי ה-enum המספריים

  4. 02:28

    Action Types לסוגי מידע נוספים

תמלול ההרצאה: רידקס - יצירת Action Types

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

  1. 00:02

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

  2. 00:18

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

  3. 00:32

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

  4. 00:44

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

  5. 01:01

    פעולה אחרת יכולה להיות לעדכן מוצר. יש לנו פה טופס כזה שמעדכן מוצר, אבל אנחנו רוצים to update product. פעולה אחרת יכולה להיות to delete product. אולי יש לנו פעולה שאומרת לנקות clear products.

  6. 01:16

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

  7. 01:30

    בואו נגדיר שהפעולה הזאת נקראת Set All Products. אפשר להגיד Download Products, Save Products, לא משנה. אני כרגע רואה שיש לי פה בעצם את כל הפעולות שהאפליקציה הזאת שבנינו יכולה לבצע על המוצרים שנמצאים ברמת ה-State של כל האפליקציה.

  8. 01:49

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

  9. 02:00

    ב-enum by default ה-value הוא מספר זה יהיה 0 זה יהיה 1 זה יהיה 2 זה יהיה 3. זה שה-enum הוא מספר לא מזיק ל-enum אבל הוא מזיק ל-redux.

  10. 02:13

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

  11. 02:33

    אז לכל אחד מהם יהיה אינאם. זאת אומרת שהקבוע הזה יהיה אפס, אבל גם באינאם שאחראי על עובדים, ושימו לב הוא לא יהיה בקובץ הזה, הוא יהיה בקובץ אחר, אני רק בעצם רושם מה יהיה בקובץ אחר, Employees Action, אז יהיה לנו פה אינאם של Add Employee ו-Update Employee ו-Delete Employee ו-Set All Employees זה

  12. 03:00

    יהיה בקובץ אחר שקשור לעובדים. כאשר אנחנו שולחים פקודה לביצוע ל-Redux

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

ההרצאה הקודמת: התקנת רידקס - Redux

ההרצאה הבאה: רידקס - יצירת Action

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

  • Types of Memories
  • Floating Action Button
  • Advanced Features - Collection Types
  • שפת JavaScript - טיפוסי נתונים - Types

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

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