האזנה לשינויים ברידקס
Redux Subscribing to Store Changes
subscribe, ומתי אין בכך צורך. השיעור בונה דוגמה שבה ההאזנה נחוצה באמת.componentDidMount רץ שוב וקורא את המידע העדכני מ-Redux. לכן מוצר שנוסף הופיע ברשימה גם בלי subscribe. האזנה נחוצה רק כשקומפוננטה מוצגת כל הזמן, ובזמן שהיא מוצגת קומפוננטה אחרת משנה את המידע.count, והיא קוראת אותו ב-componentDidMount מתוך store.getState().productState עם setState.componentDidMount רץ פעם אחת. אחרי מחיקת מוצר המספר לא מתעדכן.componentDidMount קוראים ל-store.subscribe ומעבירים לו callback שמריץ את אותו קוד קריאה ועדכון של ה-State המקומי.dispatch, גם כשהשתנה נתון אחר כמו עובד. זה חיסרון מסוים, אבל כך Redux עובד.פרקי ההרצאה: האזנה לשינויים ברידקס Redux Subscribing to Store Changes
תמלול ההרצאה: האזנה לשינויים ברידקס Redux Subscribing to Store Changes
הטקסט המלא של הדקות הראשונות בהרצאה «האזנה לשינויים ברידקס Redux Subscribing to Store Changes» בקורס הווידאו של PracticU – כתוביות בעברית עם זמן התחלה לכל פסקה. כך תוכלו לקרוא ולחפש את הנושאים לפני שמתחילים ללמוד.
אז אחרי שראינו איך אנחנו יכולים לשלוח מידע לתוך Redux עם Dispatch ואיך אנחנו יכולים לקרוא מידע מRedux על ידי GetState, בואו עכשיו נראה מה זה כל הקונספט של ההאזנה לשינויים של המידע.
מה זה ה-Subscribe הזה שמאפשר לנו להאזין לשינויים ב-Redux? למה אנחנו צריכים להאזין? אתם יכולים להגיד, אוקיי, אולי השתנה מוצר או שהתווסף מוצר.
אם התווסף כאן מוצר אתה רוצה לעדכן את המוצר שיתווסף רגע אבל זה עבד גם בלי זה אנחנו לא עשינו שום האזנה ושום subscribe ועדיין אנחנו ראינו את המוצר למה זה היה בואו נראה את זה עוד פעם אם אני עכשיו הולך ומוסיף מוצר חדש בננה והיא עולה 12 ויש לנו 300 כאלה במלאי והנה התמונה אני מוסיף אני יורד למטה אני רואה
את הבננה לא עשינו שום האזנה איך זה יכול להיות? כי אנחנו עברנו בין קומפוננטות. הקומפוננטה הזאת זאת קומפוננטה אחרת. כשאנחנו חוזרים בחזרה לרשימת המוצרים, אנחנו עוד פעם מפעילים את כל ה-Component Did Mount, ושוב פעם טוענים את כל המידע מ-Redux, ולכן נטען לנו המידע העדכני.
בכלל לא מצב שבו אנחנו צריכים להאזין לשינויים של המידע. אז מתי אנחנו כן רוצים לבצע האזנה? האזנה לשינויים אנחנו רוצים כאשר אנחנו רוצים לבנות קומפוננטה שכאשר היא מוצגת איפשהו עדיין יכול להיות שקומפוננטה אחרת תשנה את המידע תוך כדי זה שהקומפוננטה שלנו מוצגת.
אם זה קורה, אז אנחנו רוצים מיידית להציג את המידע העדכני. לא אם אנחנו עוברים בין קומפוננטות. אם אנחנו עוברים בין קומפוננטות, כל פעם הקומפוננטה מתחילה להיות מוצגת מחדש עם Component Did Mount ולוקחת את כל המידע העדכני.
אז בואו נבדוק או נבנה מקרה כזה שאנחנו כן צריכים את ההאזנה. בוא נניח שאיפשהו פה מוצג לנו איזשהו מידע לגבי סך כל המוצרים שיש לנו כרגע במערכת.
אבל הקומפוננטה הזאת שמוצגת כאן לא נעלמת. אנחנו לא מעלימים אותה כשאנחנו עוברים למקום אחר. היא תמיד מוצגת ולכן היא צריכה להאזין ולעדכן את עצמה, אחרת לא נראה שם את המידע העדכני.
אז אנחנו ניגשים לכאן ואנחנו רוצים לבנות לעצמנו קומפוננטה חדשה, קריאייט. אני אבנה אותה כסיסי, כי יש לנו שם איזשהו did mount כרגע, אפשר לבנות את זה כמובן כ-fc.
נכניס אותה לתוך המוצרים, products area ונקרא לה total products. לקומפוננטה הזאת יש state כמובן, כי יש מידע שהיא מנהלת וזה רק המספר של המוצרים. אז נגדיר, יש לנו מינוס s ובואו נבנה אותה.
אז היא אמורה להיות כאן, בואו רגע תאר אותה הנה היא והיא אמורה להיות מאוד מאוד פשוטה אין לנו שום צורך בית חול עם קונסטרקטור את זה נוריד בואו נגדיר שיש לה פה לא קודם כל נגדיר לה סטייט בסטייט נגדיר שיש לה קאונט שזה מספר המוצרים אם יש לה סטייט אז תציג לנו איזה ספן טוטל פרודקטס ובוא תביא לי
אותו כל מה שאנחנו רוצים לעשות זה לגשת ל-ComponentDeadMount ואנחנו רוצים להביא את המידע הזה מתוך ה-Redux כי יש לנו את המידע ב-Redux או שאמור להיות לנו את המידע ב-Redux.
אני כרגע אבצע את זה ללא קשר ל-Subscribe וכבר אנחנו הולכים לראות שזה לא באמת יעבוד. איך אנחנו עושים את זה? בואו ניגש לדיס נקודה סטייט נקודה קאונט ונכניס לתוכו את הסטור, גט סטייט, פרודקט סטייט, הנה רשימת המוצרים והנה מספר המוצרים שיש שם.
אוי, כמובן שאני צריך להשתמש בסט סטייט וקאונט נקודתיים לכל זה. ברור? את זה נעיף.
והנה יש לנו הגדרה איך שהקומפוננטה עולה. תגיד לי בבקשה כמה מוצרים יש לך שמה. בואו נעשה ניסוי, בואו ניקח את ה-total products ורק לצורך הניסוי נכניס אותו ל-details, סתם רק בשביל הניסוי.
פה זה אמור לעבוד כמו שצריך, תכף תראו.