רידקס - יצירת Reducer - ריאקט
בשיעור זה אנו בונים את ה-Reducer, הפונקציה המרכזית בתשתית Redux שמבצעת בפועל את כל הפעולות על ה-State, ולומדים תחילה כיצד Redux פועלת בפועל כדי לכתוב אותה נכון.
פרקי ההרצאה: רידקס - יצירת Reducer - ריאקט
תמלול ההרצאה: רידקס - יצירת Reducer - ריאקט
הטקסט המלא של הדקות הראשונות בהרצאה «רידקס - יצירת Reducer - ריאקט» בקורס הווידאו של PracticU – כתוביות בעברית עם זמן התחלה לכל פסקה. כך תוכלו לקרוא ולחפש את הנושאים לפני שמתחילים ללמוד.
אנחנו מגיעים לחלק הבא בתשתית הזאת וזה ה-Reducer. ה-Reducer, אמרנו שזאת פונקציה שאנחנו בונים שהיא זאת שמבצעת בפועל את הפעולה. כל אחת מהפעולות האלה שאנחנו יכולים לבצע ולשלוח עבורה אובייקטים כאלה, אובייקט כזה, כזה, כזה או כזה,
הפונקציה הזאת צריכה לבצע בפועל את הפעולה על ה-State הזה. עכשיו אנחנו צריכים לפני שנתחיל לכתוב אותה אנחנו צריכים להבין איך Redux באמת פועלת בכדי שנבין איך לכתוב את הפונקציה הזאת.
אני רק אכתוב כרגע Export Function אני אקרא לה Products Reducer כרגע זה מה שעשיתי אפילו לא הראיתי מה היא צריכה לקבל ומה היא צריכה להחזיר ובהחלט היא צריכה לקבל משהו ולהחזיר משהו אבל בשביל להבין את זה אנחנו צריכים להבין עיקרון פעולה של רידקס בואו נבין את זה על ידי איזשהו שרטוט
אנחנו הולכים לבנות עכשיו את הפונקציה הזאת בואו נכתוב אותה כאן. הפונקציה הזאת שאנחנו כותבים נקראת פרודקטס רדיוסר זאת הפונקציה שאנחנו רוצים לכתוב אנחנו בכל התוכנית הזאת לא הולכים לקרוא לה בעצמנו בשום מקום אנחנו לא אלו שקוראים לפונקציה הזאת מי שקורא לפונקציה הזאת זה התשתית של רידאקס.
אנחנו מכינים אותה ורידאקס היא זאת שקוראת לה. מי שבאמת הולך לקרוא לפונקציה זה רכיב ה-Store שדיברנו עליו בהתחלה.
אז בואו נצייר אותו כאן. נניח שה-Store נמצא כאן, אני אצייר אותו טיפה גדול כאן, זה ה-Store.
זה הרכיב שמנהל את כל הפעולות ברידאקס, הוא המוח של רידאקס. מה יש בתוך ה-Store? בתוך ה-Store יש את האובייקטים של האפסטייט, או בוא נגיד אובייקט אפסטייט אחד.
הרי יש לנו אפסטייט שבנינו, האפסטייט שלנו זה זה, אם אני הולך פה למעלה זה זה, אובייקט מסוג קלאס פרודקט סטייט שמכיל בתוכו כרגע מערך מוצרים, זה האובייקט הזה שאנחנו רואים כאן.
נניח שזה מה שיש לנו, אין לנו כרגע סטייט של לקוחות ושל ספקים ושל עובדים, רק מוצרים, אז הנה יש לנו אובייקט אחד, הוא נמצא בתוך הסטור והסטור מנהל אותו.
אוקיי אנחנו עכשיו רוצים לבצע איזושהי פעולה בוא נניח להוסיף מוצר אנחנו הולכים לשלוח לתוך לשלוח לתוך הסטור איזשהו אקשן של הוספת מוצר כנראה שזה יהיה האקשן הזה האקשן של אד פרודקט אקשן זה בדיוק שמכיל אובייקט מוצר ואומר מה אנחנו מעוניינים לבצע
זה הדבר שנשלח לתוך ה-Store על ידי פונקציית Dispatch. אנחנו כמובן עדיין לא ראינו איך בונים את ה-Store ולא ראינו איך אנחנו מבצעים Dispatch, כי אנחנו רק בונים את כל התשתית כרגע.
Dispatch מקבל את אותו Object, Object Action, אולי נצייר את זה כאן, אנחנו בעצם שולחים לה את אותו Action, Object, וזה מה שנתקבל לתוך ה-Store.
עכשיו אנחנו צריכים שנייה אחת להבין מה Redux הולכת לעשות עם זה. מה אובייקט ה-Store שהוא התשתית של Redux הולך לעשות עם האקשן שהבאנו לו.
מה שהוא הולך לעשות עם האקשן הוא הולך לקחת את, שימו לב, את ה-State הזה שיש לו ואת אובייקט האקשן שהבאנו לו ואת שניהם להביא לפונקציית ה-Reducer הזאת.
שימו לב, את ה-state שיש לו את כל האובייקט הוא שולח אלינו ואת אובייקט ה-action. זה אומר שהפונקציית product reducer צריכה לקבל כארגומנטים את שני החבר'ה האלה. אוקיי, בואו שנייה נעצור ונלך לבנה את זה.
אז מה שאנחנו צריכים לבנות כאן, קודם כל פרמטר ראשון זה יהיה ה-state. אוקיי, נקרא לו כרגע app state. הסוג שלו כמובן זה product state.
הפרמטר השני זה ה-action שיגיע ב-dispatch. הסוג שלו פרודקטס אקשן נכון יש לנו פה את הסטייט שהגדרנו אותו כאן ויש לנו את האקשן שהגדרנו פה שני החבר'ה האלה מתקבלים לפונקציה אנחנו לא יכולים להחליט דברים אחרים כי לא אנחנו קוראים לפונקציה הזאת
אלא רידאקס זה מה שהיא שולחת זה מה שאנחנו צריכים לקבל כארגומנטים אז בואו נחזור לסרטוט נבין מה הפונקציה הזאת צריכה לעשות הפונקציה של הרדיוסר התפקיד שלה זה לשנות את אותו סטייט שהיא קיבלה היא מקבלת את הירוק הזה ומשנה אותו וצריכה להחזיר בחזרה אובייקט
state שמכיל את השינוי. זה האובייקט שהיא מחזירה. בואו נסמן את זה כסגול. ה-store לא מוחקת את האובייקט הקודם, היא משאירה אותו ולידו את ה-state החדש.
יש לנו פה מצעד של סטייטים שהם פשוט לא השתנו, כל הזמן מכילים את השפפולים שפפולים שפפולים שלהם. למה זה? זה נראה כאילו קצת בזבוז בזיכרון.
ככה רידקס עובדת בכדי להשאיר את ההיסטוריה. יש לזה כל מיני יתרונות בזה שהשארנו את ההיסטוריה. לדוגמה דיבאגינג אנחנו יכולים לחזור אחורה בזמן ולהגיע לאיזה שהוא סטייט ישן יותר זה נקרא time travel debugging אנחנו נראה את זה במודול שקשור לדיבאגינג איך בעצם אפשר לדבק רידאקס יכול להיות שאנחנו נרצה לעשות undo ולחזור בחזרה לאיזה state ישן יותר אז ככה
רידאקס בעצם עובדת מבחינה תשתיתית אנחנו לא אמורים לשנות את הstate שקיבלנו אנחנו אמורים לשכפל אותו לשנות את השכפול ולהחזיר את השכפול זאת אומרת אם אני מסתכל כרגע רק על החתימה של הפונקציה הזאת אז הפונקציה צריכה גם היא להחזיר product state היא מקבלת product state נוכחי מה יש כרגע מבחינת הstate ומחזירה state חדש.
אז במקום שזה ייקרא upstate אני אשנה לו את השם כי עכשיו אנחנו קצת יותר מבינים מה קורה פה ואני אקרא לו current state. זה הstate הנוכחי שקיים כרגע. הפונקציה הזאת צריכה בשביל עבודה נכונה של רידאקס לשכפל אותו, לשנות את השכפול, השכפול כמובן ייקרא בשם כי אני רוצה אובייקט אחר ולהחזיר בסופו של דבר את השכפול שהוא ה-new state.
בין לבין לשנות את ה-new state. אם אנחנו מסתכלים פה רק על השרטוט, מי שקורא לproducts reducer זה ה-store, לא אנחנו, אנחנו רק עושים dispatch לסטור, הסטור שולחת את זה ואת זה, אנחנו עושים את הפעולה על שכפול, מחזירים את השכפול, אז לסטור יש את כל ההיסטוריה של הסטייטים, אבל אם מישהו בא לסטור ואומר תביא לי בבקשה