PracticU

רידקס - Using Redux Logger Middleware

בלי כתוביותעם כתוביות
PracticU › קורס ריאקט - React › רידקס - Using Redux Logger Middleware
מילון מושגים:
Middleware - שכבת תוכנה שמתווכת בין רכיבים ומטפלת בבקשות בדרכן, למשל לאימות, רישום לוג או עיבוד נתונים.
ספרייה - אוסף קוד מוכן, כמו פונקציות ומחלקות, שמפתחים משתמשים בו בתוכניותיהם במקום לכתוב הכול מחדש.
לוג - רישום מתועד של אירועים ופעולות שמתרחשים במערכת או בתוכנה, המשמש למעקב ולאיתור תקלות.
npm - מנהל החבילות של Node.js, המשמש להתקנה ולניהול ספריות JavaScript בפרויקט.
TypeScript - שפת תכנות המרחיבה את JavaScript בהוספת טיפוסים, ומתקמפלת ל-JavaScript רגיל.
סטייט - המידע על מצבו הנוכחי של רכיב או אפליקציה בזמן נתון, שמשתנה ומשפיע על מה שמוצג.
React - ספריית JavaScript לבניית ממשקי משתמש מבוססי רכיבים, שפותחה על ידי פייסבוק.
מחלקה - תבנית בתכנות מונחה עצמים שמגדירה אילו נתונים ופעולות יהיו לאובייקטים שנוצרים ממנה.
רידקס - Using Redux Logger Middleware
במקום לכתוב Middleware בעצמנו, אפשר להשתמש בספרייה מוכנה, Redux Logger, ולקבל בקונסול לוג צבעוני של כל הפעולות.
השלבים העיקריים
1. התקנה: npm i redux-logger ובנוסף @types/redux-logger, כי הפרויקט ב-TypeScript.
2. ייבוא: מייבאים את הפונקציה logger מתוך redux-logger. היא ה-Middleware עצמו.
3. חיבור: מוסיפים אותה לרשימה שמועברת ל-applyMiddleware, לצד ה-Middlewares הקיימים.
4. בדיקה: אחרי רענון, הקונסול מציג בצבעים את ה-previous state, את ה-action ואת ה-next state. לדוגמה, אפשר לראות את המוצרים לפני ואת 77 המוצרים אחרי, וגם פעולות של עובדים. לצד זה מופיע הפלט של ה-Middleware שבנינו קודם, שסופר פעולות.
סיכום הסדרה
המרצה סוקר את מה שנלמד על Redux: שימוש ישיר בקומפוננטות, סרוויסים, react-redux עם Class ועם Hooks, ו-Middlewares. הדגש הוא על Global State פשוט לגישה, שחוסך להעביר מידע בין קומפוננטות.
אחרי השיעור אפשר לשלב Middleware מוכן של ספרייה חיצונית ולראות את פעילות Redux בקונסול.

פרקי ההרצאה: רידקס - Using Redux Logger Middleware

  1. 00:00

    התקנת Redux Logger

  2. 00:42

    שילוב Logger ב-ApplyMiddleware

  3. 01:19

    הצגת previous ו-next state

  4. 01:58

    שילוב מידלוויר נוספים

תמלול ההרצאה: רידקס - Using Redux Logger Middleware

הטקסט המלא של הדקות הראשונות בהרצאה «רידקס - Using Redux Logger Middleware» בקורס הווידאו של PracticU – כתוביות בעברית עם זמן התחלה לכל פסקה. כך תוכלו לקרוא ולחפש את הנושאים לפני שמתחילים ללמוד.

  1. 00:02

    אז אחרי שראינו מה זה מידלווייר, בואו נשתמש במידלווייר מוכן. אנחנו רוצים להשתמש במידלווייר מגניב שנקרא Redux Logger. בואו נתקין אותו.

  2. 00:15

    npm i Redux Logger strudel types/reduxlogger אנחנו רוצים כאן את הטייפס שלו כי אנחנו בטייפסקריפ בואו ניתן לו לרוץ בינתיים אנחנו רוצים רק לשלב אותו פה זה כל מה שאנחנו צריכים.

  3. 00:35

    אז ה-middleware הזה זאת פשוט פונקציה שנקראת Logger, הנה היא, והיא נמצאת בתוך ReduxLogger.

  4. 00:46

    בואו ניקח אותו, Logger מתוך ReduxLogger, וזאת הפונקציה. מעולה. זה כל מה שאנחנו צריכים. יש לנו פה את ה-ApplyMiddleware, כל ה-Middleware שלנו אנחנו זורקים לתוך ה-ApplyMiddleware.

  5. 01:02

    בואו נראה מה זה עושה. ניגש רגע לאפליקציה. בואו ניגש להום ונרפרש אותו, יופי. כל מה שזה עושה זה מציג לנו לוג ממש מגניב בקונסול עם צבעים ומראה לנו את ה-previous state ואת ה-action ואת ה-next state והרבה דברים מעניינים בצבעים, הנה אנחנו רואים את המוצרים שהיו לפני, הנה אנחנו רואים שיש לנו פה 77 מוצרים אחרי.

  6. 01:39

    בואו ניגש לאמפלואיז ושימו לב שהוא פשוט עושה לנו לוג כזה מגניב עם צבעים. זה המידלוויר שאנחנו בנינו שעושה קאונט לכמה פעמים סו-אקשן.

  7. 01:51

    ויש לנו פה בצבעים ממש מגניבים את המידע בקונסול לגבי רידאקס. אז הנה יש לנו כאן אפשרות לשלב גם כל מיני

לקורס המלא: קורס ריאקט אונליין

ההרצאה הקודמת: רידקס - יצירת Middleware

ההרצאה הבאה: אימות משתמשים בריאקט - Authentication & Authorization

הרצאות קשורות מקורסים אחרים

  • Express Middleware
  • Using the DDMS
  • הבנה של Middleware - Filters
  • Creating and Using Arrays

קורסים נוספים במסלול

  • קורס יסודות HTML - בניית אתר אינטרנט פשוט
  • קורס CSS 3 - בדגש על Flex & Grid
  • קורס Javascript כולל JQuery
  • קורס ג'אווה סקריפט מעשי - JavaScript
  • קורס TypeScript
  • קורס NodeJS