ספריית react-redux בתוך CC
props בלי לגשת ל-store ובלי סרוויס משלנו. הדוגמה היא קומפוננטת total products.react-redux ואת @types/react-redux.index.tsx, ברמה גבוהה מאוד, עוטפים את ה-Layout ברכיב Provider ונותנים לו את אובייקט ה-store. כך לכל הקומפוננטות הפנימיות יש גישה עקיפה לסטור.props שמכילים רק מה שהיא צריכה, כאן count, ובנוסף את dispatch (מקבל ProductsAction ולא מחזיר דבר). ה-state של הקומפוננטה נעלם.componentDidMount, את subscribe ואת unsubscribe, כי הספרייה מבצעת האזנה וביטול האזנה אוטומטית.mapStateToProps: מקבלת את כל ה-AppState ומחזירה אובייקט עם הערכים שהקומפוננטה צריכה, כאן count מתוך אורך מערך המוצרים. אפשר להחזיר כמה שדות.mapDispatchToProps: מקבלת את dispatch של ה-store ומחזירה אותו כדי שייכנס ל-props.connect: connect מקבלת את שתי הפונקציות ומחזירה פונקציה נוספת, ובה שולחים את הקומפוננטה. זה מושג Higher Order Component.dispatch לא נחוץ בדוגמה, אבל הוא עשוי להידרש בקומפוננטות אחרות, ואז הוא זמין ב-this.props.dispatch.store.פרקי ההרצאה: ספריית react-redux בתוך CC
תמלול ההרצאה: ספריית react-redux בתוך CC
הטקסט המלא של הדקות הראשונות בהרצאה «ספריית react-redux בתוך CC» בקורס הווידאו של PracticU – כתוביות בעברית עם זמן התחלה לכל פסקה. כך תוכלו לקרוא ולחפש את הנושאים לפני שמתחילים ללמוד.
אז אנחנו ראינו איך אפשר לעבוד עם רידאקס מבחינת בניית תשתית ושימוש בתשתית הזאת בין אם בכל מיני מקומות בקומפוננטות ובין אם בסרוויס מרוכז ואז שימוש בסרוויס בקומפוננטות השונות.
אבל כל מה שעשינו זה השתמשנו עם ספריית רידאקס הבסיסית. בנוסף גם ספרייה מיוחדת עבור ריאקט שעושה איזשהו ראפר עבור רידקס כך שניתן יהיה להשתמש בקומפוננטות במידע שלנו לבצע לדוגמה דיספאץ' או לקרוא דברים מהסטייט מבלי באמת להתעסק עם הסטור.
מה שאנחנו עשינו זה מעולה אם אנחנו רוצים לעבוד סוג של נייטיב אבל בסרטון הזה אנחנו רוצים לראות איך אפשר לעבוד עם הספרייה הזאת כאשר אנו בונים קומפוננטה שהיא קלאס קומפוננט בלי באמת להשתמש עם ה-Store.
איפה אנחנו רוצים לעשות את זה? אנחנו הולכים לעשות את זה באחת הקומפוננטות שבנינו, נראה רק איזושהי דוגמה לשימוש בספרייה הזאת, אבל לפני זה בואו נתקין אותה.
הספרייה נקראת ntmi React/Redux, זאת ממש ספרייה מיוחדת עבור React, ואנחנו נצטרך גם את הטייפס שלה, טייפס/ריאקט/Redux, וזה בעצם מתקין לנו את הספרייה ומאפשר לנו להשתמש איתה.
הקונספט של הספרייה הזאת אומר דבר כזה, אנחנו משתמשים באיזושהי פקודה מעניינת, אנחנו משתמשים פה באינדקס TSX, אפשר גם במקומות אחרים, אפשר ברמת ה-Layout, אבל אנחנו צריכים להגיע לאיזושהי תגית מאוד מאוד מאוד גבוהה, מאוד High-Level, אני אעשה את זה כאן.
אנחנו פשוט כאן משתמשים באיזשהו רכיב שנקרא Provider והוא שייך לספרייה הזאת. אני יוצר בעצם תגיד Provider, זאת פתיחה, זאת סגירה. שימו לב שאנחנו עוטפים ב-High Level את כל הקומפוננטות שלנו כי אנחנו עוטפים כרגע את ה-Layout ואנחנו נותנים לו את ה-Store, זה האובייקט Store שאנחנו כבר מכירים.
פרוביידר זאת בעצם תגיד ששייכת לספרייה הזאת, שמה שהיא עושה היא מצליחה להעביר את אובייקט הסטור לכל הקומפוננטות הפנימיות שיש בתוכה. במילים אחרות אם עטפנו את הליירד בפרוביידר לכל הקומפוננטות של כל האתר שלנו יהיה גישה עקיפה לסטור ואז הם לא יצטרכו לעבוד ישירות עם הסטור אבל כמובן הם יצטרכו לעבוד עם איזושהי טכניקה שכבר אנחנו נראה.
זה הדבר הראשון שאנחנו חייבים לבצע עבור הספרייה המיוחדת הזאת React Redux. עכשיו אנחנו רוצים להתחיל לעבוד איתה. אז אנחנו רוצים לגשת לאחד הקומפוננטות, בואו ניקח לדוגמה את Total Products.
Total Products היא קומפוננטה ממש קטנה ולכן אני רוצה בעצם לראות איך אנחנו יכולים לעבוד איתה עם הספרייה הזאת. אבל מה שאני אעשה, אני אשים בהערה את כל הקוד הקודם ואני אני אבנה כאן קוד חדש, בואו נבצע פה איזה חלוקה כזאת ויש לנו עכשיו קוד שהוא הולך לעבוד עם הספרייה
ולא ישירות. כאן עבדנו עם סרוויס שבנינו, שזה בסדר, אבל סרוויס ישתמש בסטור. אנחנו רוצים להצליח לעבוד בלי לגשת לסטור ובלי לגשת לסרוויס משלנו, אלא לעבוד עם React Redux.
אז איך עובדים עם הספרייה הזאת? אז יש שתי טכניקות לעבוד איתה, טכניקה ראשונה שייכת ל-class component ומה שהיא באה לעשות זה לבצע את הדבר הבא, המטרה של הספרייה הזאת היא שאנחנו לא נעבוד עם ה-Store בעצמנו ועם כל ה-State שיש בתוך ה-Store בעצמנו, אלא אנחנו נשלוף כביכול מתוך ה-Store ומתוך כל ה-Global State שמכיל המון דברים, כן, הוא מכיל עובדים וספקים ולקוחות ויוזרים
וכו' וכו' וכו', נשלוף רק מה שאנחנו צריכים לעבוד איתו. אם אני מסתכל רגע על הקומפוננטה הזאת, אנחנו צריכים לעבוד רק עם קאונט. אז איכשהו אנחנו צריכים לשלוף מכל הבלאגן הזה שיש פה ב-readax, תראו, יש פה המון המון דברים, יש פה רשימה של עובדים ויש פה רשימה של מוצרים ויש פה המון המון דברים לגבי אותם מוצרים, כן, יש פה מערך של מוצרים
וכו' וכו', אנחנו עבור הקומפוננטה הזאת שאנחנו בונים צריכים רק את אקאונט שלה אם הייתי צריך רק את המוצרים אין בעיה אז הייתי צריך גם לשלוף את המוצרים אבל כרגע אנחנו צריכים רק את אקאונט בנוסף לדברים שאנחנו רוצים לקבל יכול להיות שאנחנו רוצים גם לשלוח מידע ולכן אנחנו צריכים את הדיספאץ׳ אז מה
שהספרייה הזאת עושה זה פשוט אומרת כזה דבר תארגנו לעצמכם רופס בואו נארגן אנחנו בונים את total products props תוך ה-props שימו את כל מה שאתם רוצים מתוך הגלובל סטייט שזה כרגע רק אקאונט ובנוסף גם את ה-dispatch ה-dispatch שלנו למרות שאנחנו לא באמת צריכים אותה אבל אני כן יוסיף
אותה למטרה שאולי תצטרכו בהמשך אז נראה איך עושים את זה אז ה-Dispatch היא מקבלת אקשן מסוג Products Action כי אנחנו מתעסקים עם מוצרים ולא מחזירה כלום.
אז יש לנו כרגע את ה-Props של הקומפוננטה שלנו שאנחנו צריכים לשלב וכל המידע שאנחנו צריכים נמצא בתוכה, כל המידע שדרוש עבור הקומפוננטה שלנו בנוסף ל-Dispatch אם אנחנו צריכים את ה-Dispatch.
אנחנו לא צריכים לעבוד יותר עם ה-State במקרה הזה לפחות, אז אני מעיף את זה, ואני מגדיר את ה-props. עכשיו יש לקומפוננטה שלנו props, אין לנו state, יש לנו props.
אז בואו נשתמש עם ה-count שנמצא ב-props. אנחנו לא צריכים את הסימן שאלה הזה, כי במקסימום הוא יהיה 0, props, אוקיי, וזה מה שיש לנו, אנחנו גם לא רוצים את זה, את הדבר הזה, נפטר מה-component did mount, אין לנו בו שום צורך.
אוקיי, כאשר אנחנו עובדים עם הספרייה הזאת אז היא מבצעת אוטומטית סאבסקרייב ואנסאבסקרייב זה עוד יתרון אז אני מעיף את הסאבסקרייב ואת האנסאבסקרייב הזה ויש לי כרגע משהו קצת מוזר בואו ניפטר רגע מזה ומזה ותראו כמה קודים חסכנו פה יש לי רק מה שאני צריך מהגלובל סטייט בתוך הפרופס שלי ויש לי את פונקציית הדיספנץ'
אולי אני צריך אותה אולי אני לא צריך אותה כרגע שמתי אותה ואני משתמש עם המידע בתוך הקומפוננטה. אבל איך בדיוק המידע הולך להגיע באורח קסם או באורח פלא מהגלובל סטייט לפה, לקאונט הזה?
אז אנחנו צריכים עכשיו לבנות שתי פונקציות. בדרך כלל בונים אותם כאן מחוץ לקומפוננטה, הם לא שייכים כאילו לתוכן של הקומפוננטה.