רידקס - Reading Data from the Store

תמלול ההרצאה: רידקס - Reading Data from the Store

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

1. 00:02

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

2. 00:15

   עכשיו כדאי לנו גם להכניס כאן קריאה של המידע מרידאקס. אבל למה? למה כדאי לנו להכניס כאן קריאה של המידע?

3. 00:28

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

4. 00:49

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

5. 01:01

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

6. 01:16

   והראוט הזה הוא אותו הראוט של api/products/delayed. Enter. אתם רואים שהוא חושב חושב חושב כמה שניות, ורק אז מביא לנו את המוצרים. בואו עוד פעם ננסה, ניקח את זה למקום אחר, פה.

7. 01:32

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

8. 01:42

   זאת אומרת שאם אנחנו כאן לא גולשים לproducts as is, אם אני אכנס אליו אז אני אראה שproducts url זה הבייס בשורשר עם product בשורשר עם איזשהו סלאש, אלא אני אוסיף כאן רק לצורך בדיקה מהירה delayed בצורה כזאת.

9. 02:02

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

10. 02:14

    נדמה לי שבנינו משהו כזה פעם. קודם כל בואו טיפה נצמצם כאן. את זה נשים כאן ואת זה נשים פה ואת זה נשים פה ואז נוכל סתם קצת כאן לשים איזה משהו שהיה לנו פה ב-shared אולי, please wait.

11. 02:34

    מה זה please wait? זה איזשהו רכיב שהציג משהו מסתובב, אם אני זוכר נכון. please wait, בוא תציג לי איזה משהו מסתובב כזה, רק אני לא רוצה לראות כל הזמן את הדבר המסתובב הזה, אני רוצה לראות אותו כל עוד אין לנו מוצרים.

12. 02:55

    כרגע הוא כל הזמן יוצג. אני אלך לפה, בואו רגע נרפרש אותו, אז הוא כל הזמן מוצג, בין אם יש מוצרים ובין אם אין מוצרים, הוא כל כל כל הזמן מוצג.

13. 03:06

    אנחנו רוצים לשים פה conditional כזה, ולהגיד לו אם יש לך משהו בסטייט, או ליתר דיוק, יש לך מוצרים, אם הם undefined, אז תציג לנו את ה-please wait הזה.

14. 03:22

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

15. 03:38

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

16. 03:48

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

17. 04:20

    בסטייט אם לא לך לשרת ותביא את המידע אם כן הכל בסדר אל תביא לי את המידע מהשרת. לשרת אתה הולך רק אם אין לי את הנתונים. עם Store.GetState.

18. 04:34

    ה-GetState זאת פונקציה