מה זה רידקס - Redux

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

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

1. 00:02

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

2. 00:17

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

3. 00:34

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

4. 00:49

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

5. 01:16

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

6. 01:36

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

7. 01:48

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

8. 02:11

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

9. 02:27

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

10. 02:37

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

11. 02:50

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

12. 03:09

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

13. 03:21

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

14. 03:45

    ב-component based architecture כלומר ארכיטקטורה מבוססת קומפוננטות ב-react יש לנו המון קומפוננטות אז בוא נגיד שהירוק הזה שאנחנו רואים כרגע זאת הקומפוננטה הראשית, נניח ה-Layout, ויש לנו קומפוננטה, נקרא

15. 03:59

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

16. 04:11

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

17. 04:32

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

18. 04:41

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

19. 05:01

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

20. 05:26

    איזה מידע שהיא רוצה לאפורה בעזרת איזושהי פונקציית callback כזאת. אז מה הקשר בין הצהובה הזאת לכחולה? הצהובה היא לא פרנט של הכחולה והצהובה היא לא child של הכחולה.

21. 05:41

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

22. 06:07

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

23. 06:33

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

24. 06:55

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

25. 07:16

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

26. 07:31

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

27. 07:47

    שימו לב איזה קלות יכולה להיות לנו. בואו נראה את ארבעת המצבים שדיברנו עליהם. מה זה אומר Dispatch? Dispatch זה פשוט, הנה יש לנו קומפוננטה, הנה יש לנו Store,