רידקס - יצירת Middleware
dispatch (ולא בקריאת מידע בלבד).dispatch. אם אינו קורא ל-next, Redux לא ממשיך.middleware.ts ומייצאים ממנו פונקציה בשם countActions. הוגדר בה counter שמתחיל ב-0 וסופר כמה פעולות עברו.store ומחזירה פונקציה שמקבלת את next, וזו מחזירה פונקציה שמקבלת את אובייקט ה-action (כאן any). התחביר נראה מוזר, אבל כך בונים Middleware.next: בקריאה ל-next(action) Redux מבצע את ה-dispatch. לפניה store.getState() מחזיר את ה-State הקודם, ואחריה את החדש, אחרי ה-Reducer.store: כארגומנט שני ב-createStore שולחים applyMiddleware ובתוכו את הפונקציה. אפשר לשלב כמה Middlewares.counter ב-1 ומדפיסה בעזרת template string את סוג הפעולה הנוכחי ואת Total Actions.dispatch לא הדפיסה דבר. מחיקת מוצר הדפיסה Total Actions 3.store, למשל ללוג, לשליחת סטטיסטיקות לשרת או לניקוי מידע לפני כניסתו ל-Redux.פרקי ההרצאה: רידקס - יצירת Middleware
תמלול ההרצאה: רידקס - יצירת Middleware
הטקסט המלא של הדקות הראשונות בהרצאה «רידקס - יצירת Middleware» בקורס הווידאו של PracticU – כתוביות בעברית עם זמן התחלה לכל פסקה. כך תוכלו לקרוא ולחפש את הנושאים לפני שמתחילים ללמוד.
הדבר הבא שחשוב לנו להכיר בנושא רידאקס נקרא מידלוויר. מידלוויר זאת פונקציה שמופעלת באמצע משהו, במידל. אנחנו יכולים לשלב מידלוויר בתוך העבודה עם רידאקס, כאשר המידלוויר מופעלת כל פעם שמבצעים דיספאץ', כל פעם ששולחים משהו, לא כאשר רק רוצים לקרוא מידע,
אלא תמיד כאשר מבצעים dispatch ורק כאשר מבצעים dispatch המידלוור מופעלת באמצע ואומרת אני יכולה לבצע משהו מה אתה רוצה שאני אבצע כל פעם שמבצעים dispatch האם אתה רוצה שאני אשנה את המידע אולי שאתה מכניס לרידאקס האם אתה רוצה שאני אקרא אותו האם אתה רוצה שאני אדפיס אותו על הקונסול מה אתה רוצה שאני אעשה איתו
זה בעצם האפשרות שלנו לבצע אז בואו נבנה custom middleware בואו בואו נבנה מידלוור פשוטה, שימו לב שאני נמצא בתוך התיקייה של הרידאקס. בואו נקרא לזה מידלוור טייק סקריפט ופשוט נזרוק פה את כל הפונקציות שאנחנו רוצים. כרגע אנחנו רוצים לבנות פונקציה אחת בלבד.
אקספורט פונקצ'ן ונקרא לפונקציה קאונט אקשנס. כל מה שהפונקציה הזאת צריכה לעשות זה לספור כמה אקשנס יש בתוכנית. סתם רק בשביל לראות שמשהו מתבצע בכל פעם עושים dispatch בצורה אוטומטית.
אז אנחנו רוצים לספור את האקשן, אז בואו נפתח באזור הזה איזה counter, נכניס בתוכו 0, ואיך אנחנו בונים middleware, מה הפונקציה שלנו צריכה לבצע.
אז הפונקציה שלנו מקבלת את ה-store, ה-store האמיתית. דרך האובייקט של ה-store אנחנו יכולים כמובן לגשת ל-get a state לדוגמה. לבנות middleware זה קצת טריקי כזה, זה לא הכי סימפל להבין מה בעצם אנחנו עושים פה, אבל זה התחביר.
middleware מחזירה פונקציה. הפונקציה הראשונה שאנחנו בונים מקבלת את ה-store. כלומר, Redux הולכת לקרוא לפונקציה הזאת ולתת לנו את ה-store.
היא תקבל בחזרה את הפונקציה שלנו, תקרא לה ותביא לה פונקציה, אנחנו קוראים לה next, שאנחנו חייבים לקרוא לה איפה שהוא פה, אחרת Redux לא תמשיך ותבצע את ה-Dispatch.
אם אנחנו לא רוצים, יכול להיות שאנחנו אומרים, רגע, בוא ה-Middleware שלנו בודקת משהו ומחליטה אם באמת לאשר את ה-Dispatch כן או לא.
אז אנחנו יכולים לבטל או לא לאשר את ה-Dispatch אם אנחנו לא קוראים ל-Next. פונקציה הזאת מחזירה עוד פונקציה, זאת הסיבה שלבנות middleware זה קצת טריגי כזה, קצת תחביר מוזר כזה.
הפונקציה הזאת מקבלת את אובייקט האקשן. כרגע הוא יכול להיות call action אז אני אשתמש ב-any.
כאן בפונקציה הפנימית אנחנו מבצעים את הקוד שלנו, כאשר אנחנו חייבים, אם אנחנו רוצים לאשר בעצם את ה-dispatch, אנחנו חייבים לקרוא ל-next ולשלוח את האקשן.
בעצם מאשר וממשיך את הפעילות של רידאקס. עכשיו אנחנו מחלקים את הפונקציה הזאת לשני חלקים, מה יש לנו לפני קריאה ל-next ומה יש לנו אחרי קריאה ל-next.
לפני קריאה ל-next, here, store.getState returns the previous state before calling the reducer. אחרי זה store.getState returns the next state after calling the reducer כי הרי הstate השתנה יש איזשהו dispatch אז רק בשביל לבדוק כרגע נדפיס על הקונסול את האקשן ונדפיס על הקונסול את store.getState לפני ואחרי רק בשביל לראות מה בעצם
מתרחש על הקונסול תכף נמחק את זה נשדרג את זה קצת, ועוד מעט נשתמש עם הקאונטר,