ספריית react-redux בתוך FC
mapStateToProps, את mapDispatchToProps ואת connect מהשיעור הקודם. כך הקוד של הקומפוננטה נעשה קצר בהרבה.class כותבים function שמחזירה אלמנט JSX. אין extends, אין render, ואין צורך ב-props בדוגמה הזאת. המחיקה כוללת גם את שתי הפונקציות החיצוניות ואת connect.useSelector: מקבל פונקציה שמקבלת את ה-AppState ומחזירה את מה שצריך, והיא מקבילה ל-mapStateToProps. כך const count = useSelector(...) מחליף בשורה אחת את כל הקוד. אפשר לקרוא לה כמה פעמים, למשל כדי להביא גם topProduct עם find.useDispatch: מחזיר את ה-dispatch של Redux, ואפשר לציין את סוג הפעולה, כאן ProductAction. הוא מחליף את mapDispatchToProps.store ועבודה עם כל הנתונים ברמת האפליקציה.פרקי ההרצאה: ספריית react-redux בתוך FC
תמלול ההרצאה: ספריית react-redux בתוך FC
הטקסט המלא של הדקות הראשונות בהרצאה «ספריית react-redux בתוך FC» בקורס הווידאו של PracticU – כתוביות בעברית עם זמן התחלה לכל פסקה. כך תוכלו לקרוא ולחפש את הנושאים לפני שמתחילים ללמוד.
הספרייה המגניבה הזאת React Redux מכילה גם פונקציות מיוחדות לעבודה עם Functional Components. הפונקציות האלה זה React Hooks מיוחדות שמחליפות את שני החבר'ה האלה עבור Functional Component.
זה מה שאנחנו רוצים לראות כעת. מה שאני רוצה לעשות זה לשכפל את כל הקומפוננטה הזאת. בואו רגע רק נשים את זה בהערה.
כפלתי את כל הקומפוננטה ואני רוצה לבנות אותה כ-functional component ולא כ-class component ולראות איך אפשר לעבוד איתה אם יש לנו functional component. אז קודם כל במקום class יש פה function ואין לנו פה את ה-extend הזה והפונקציה כמובן מחזירה את ה-jsX אלמנט במקום public render.
בואו ניפטר רגע מזה וניפטר מזה. אין לנו props, כי אנחנו functional component, האמת פה חסר לי כזה דבר. ב-functional component כמובן יכול להיות props, אבל אנחנו לא צריכים את ה-props, אין לנו פה את ה-component הזאת.
מה עוד? אנחנו פשוט מאוד, בואו ניפטר גם משתי הפונקציות האלה, אנחנו לא עובדים איתם, אנחנו לא עובדים עם קונקט, זה נחזיר, וניפטר מזה ומזה.
האמת שזה אני צריך? כן, זה אני צריך. אורייט, אז קודם כל, כמו שאתם רואים, הקוד הרבה הרבה הרבה יותר קצר. Functional Component, כאן אני יכול לקרוא ל-react hooks, וה-react Hooks שאנחנו צריכים, אחת נקראת useSelector, שימו לב שזה מגיע מהספרייה שאנחנו מדברים עליה, React Redux, ו-useSelector אומרת כזה דבר: תן לי פונקציה
שמקבלת את ה-upState והיא מחזירה לך ספציפית מה שאתה צריך. א', אתה יכול לקרוא לה פעם אחת ולהביא אובייקט אחד, או אתה יכול לקרוא לה כמה פעמים ולהביא ריטים ספציפיים.
והיא מקבילה ל-map state to props. זאת אומרת שכתבו את map state to props על ידי use selector. אז אנחנו רוצים למפות את ה-upstate שהוא מסוג כרגע any ל-count.
אוקיי, אז כל מה שאנחנו רוצים לעשות זה להחזיר את זה, בואו נחזיר את זה מפה. הפונקציה הזאת אז מחזירה לנו את אקאונט, קונסט אקאונט שווה.
והנה יש לנו את כל הקוד הזה בשורה אחת, מבלי הצורך להשתמש בפונקציה נפרדת ולחבר אותה בהייר אורדר קומפוננט וכדומה.