רידקס - Redux Developer Tools

בלי כתוביותעם כתוביות

מילון מושגים:

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

חבילה - אוסף ארוז של קוד, ספריות או קבצים המופץ כיחידה אחת ומותקן בעזרת מנהל חבילות.

npm - מנהל החבילות של Node.js, המשמש להתקנה ולניהול ספריות JavaScript בפרויקט.

Middleware - שכבת תוכנה שמתווכת בין רכיבים ומטפלת בבקשות בדרכן, למשל לאימות, רישום לוג או עיבוד נתונים.

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

כפתור - רכיב בממשק המשתמש שהמשתמש לוחץ עליו כדי להפעיל פעולה, כמו שליחת טופס או מעבר לדף אחר.

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

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

רידקס - Redux Developer Tools

הרחבת Redux DevTools רושמת כל פעולה שעוברת ב-Redux ומאפשרת לראות את ה-state ולנוע בזמן. ההרצאה מראה איך מחברים אותה ל-store ואיך משתמשים בה.

חיבור הכלי

1. התקנת התוסף ל-Chrome: מחפשים Redux DevTools ומוסיפים. האייקון לא נדלק לבד, צריך לחבר אותו לקוד.

2. התקנת חבילה: npm i redux-devtools-extension.

3. שינוי יצירת ה-store: מוסיפים את composeWithDevTools מהחבילה. כי createStore לא מקבלת אותה ישירות, עוטפים אותה יחד עם ה-middleware בפונקציה compose מ-Redux.

4. רק בפיתוח: הכלי צורך ביצועים ולא מתאים לפרודקשן. ב-config מגדירים isDevelopment כ-process.env.NODE_ENV === 'development', וביצירת ה-store משתמשים באופרטור טרינארי: בפיתוח שולחים את ה-enhancer ואחרת undefined.

5. פתיחה: אחרי רענון האייקון נדלק. מקבעים את החלונית בצד ימין, כך שרואים אותה יחד עם האתר.

מה הכלי מציג

6. רשימת פעולות: כל dispatch מופיע במחסנית. אחרי login רואים את הפעולה, ובשונה מזה אפשר לראות לכל פעולה את Action (type ו-payload), את ה-State בתצוגות Tree, Chart ו-Raw ואת ה-Diff מול המצב הקודם.

7. פעולות נוספות: גם setAllEmployees ו-setAllProducts מופיעות בעת טעינת הדפים.

8. Time travel debugging: כפתור ה-play מריץ את כל הפעולות לפי הסדר, ורואים את השינויים גם ב-UI. אפשר לבצע jump לפעולה מסוימת, או skip כדי לראות איך ייראו הנתונים בלי אותה פעולה.

9. שמירה וטעינה: Save מייצא JSON עם כל הפעולות. אחרי רענון, שמוחק את ה-Redux, אפשר להעלות אותו ולקבל חזרה את כל ה-state, גם אחרי logout.

עכשיו אפשר לחבר את Redux DevTools לפרויקט ולעקוב אחרי כל פעולה ושינוי state לצורכי דיבאג.

השיעור הבא בקורס: מובקס - MobX Developer Tools

פרקי ההרצאה: רידקס - Redux Developer Tools

תמלול ההרצאה: רידקס - Redux Developer Tools

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

00:02
אז אנחנו מגיעים לכלי הבא והכלי הבא זה כלי שמאפשר לבדוק ספציפית את ה-Redux. בואו נתקין אותו. הכלי הזה זה Chrome Extension אז ניכנס לגוגל ונחפש Redux DevTools הנה הוא פה.
00:22
בואו ניכנס אליו Add to Chrome Add Extention הנה אנחנו רואים אותו כאן ונבצע גיבוע לכלי הזה הנה הסיכה. כמובן זה לא משהו שאנחנו חייבים לעשות אבל הנה אנחנו רואים אותו כאן שוב פעם הוא מראה שאין אתר בריאקט כרגע או באתר שמשתמש ברידאקס ליתר דיוק ובואו נבצע איזשהו ריפרש
00:47
ועדיין אנחנו לא רואים. בכדי לעבוד עם הכלי הזה אנחנו צריכים לחבר משהו לקוד שלנו ומה שאנחנו צריכים לעשות זה פשוט התקנה. אז אנחנו רוצים לגשת ולפתוח טרמינל ולבצע התקנה של npm.i.redux.dev.tools. extension.go אז הוא מתקין לו את זה ומה שאנחנו צריכים לעשות זה לחבר משהו ל-redux ואנחנו מחברים את זה ברמת ה-store.
01:27
ניתן לו להתקין כמה זמן שהוא צריך. בואו ניגש לתיקייה של ה-redux. הסטור שלנו ומה שאנחנו רוצים לעשות זה אובייקט הסטור.
01:38
אנחנו רואים שאובייקט הסטור מוגדר על ידי קריאט סטור, יש לנו פה Redusers, יש לנו Apply Middleware שמקבל את כל ה-Middleware שלנו ואנחנו רוצים גם להאזין לשינויי רידאקס על ידי אותו כלי.
01:56
איך אנחנו עושים את זה? אנחנו צריכים להוסיף כאן פונקציה מיוחדת שמגיעה מהכלי הזה. הפונקציה נקראת Compose with DevTools. אם אני אנסה להוסיף אותה כאן, Compose with DevTools, אני רואה אותה כאן.
02:14
אבל מה הבעיה? הבעיה היא ש-Create Store לא מקבלת עוד Create with DevTools, והדבר הזה הוא לא בדיוק Middleware. אז מה שאנחנו צריכים לעשות, אנחנו צריכים להשתמש בעוד פונקציה שנקראת Compose.
02:33
הנה היא כאן. Compose מאפשרת לנו גם לחבר Middleware וגם לחבר Development Tools. אנחנו מחברים את ה-Compose with DevTool. הוא מגיע מ-Redux DevTools Extension שראינו וה-Compose מגיע מ-Redux.
02:53
אז הנה חיברנו אותו וכעת אם אנחנו חוזרים בואו רגע נרפרש, אנחנו רואים שהוא נדלק כזה בירקרק עם אדום. אוקיי, זה אומר שהוא מאזין לאתר הזה ומבין שיש פה בעצם פעילות של רידקס.
03:11
אבל לפני שנעבור ונראה איך עובדים איתו, איזשהו משפט לגבי זה. הכלי הזה זה כלי שזולל פרפורמנס והוא לא מתאים למצב פרודקשן.
03:23
אנחנו לא כל כך רוצים בפרודקשן להדליק את הכלי הזה. לכן, מה שכדאי לנו לבצע זה איזשהו בדיקה האם אנחנו נמצאים כרגע ב-Development או ב-Production ולפי זה לדעת האם אנחנו רוצים להדליק את הכלי הזה או לא להדליק את הכלי.
03:41
בואו ניגש ל-Config ובואו נוסיף, האמת בואו נוסיף כאן ב-Config איזושהי הגדרה Public is Development ונכניס לתוכו את הביטוי הבא process.env.node.env האם זה שווה ל-development אם זה true זה אומר שאנחנו ב-development אפשר כמובן לשכפל את זה ל-production ולבדוק האם אנחנו ב-production ואז אפשר להשתמש או עם זה או עם זה במהלך האפליקציה שלנו אבל עכשיו
03:56
ב-config יש לנו יכולת לדעת האם אנחנו ב-development כן או לא לפי זה אנחנו יכולים לבצע פה איזשהו if ולפי זה ליצור את ה-store אני אעשה את זה באופרטור טרינארי אולי, פונקציה מחזירה Store Enhancer, אוקיי, בסדר.
04:36
בואו נבדוק, נגיד לו פה שאנחנו רוצים לבדוק את קונפיג, קונפיג מי? קונפיג שלנו, איפה הקונפיג שלנו? לא מוצא לי את הקונפיג שלנו, למה אתה לא מוצא לי אותו?
04:54
בואו נלחץ עליו דאבל קליק, אולי כאן הוא ייתן לי. אה הנה הוא פה, זה הקונפיג שלנו. config.isDevelopment אם כן תן לי את זה אם לא תן לי איזה undefined אז אנחנו בעצם לא שולחים שום דבר כ-enhancer יופי אז עכשיו חיברנו את זה אנחנו כמובן כרגע כן נמצאים ב-development
05:19
אז הכלי יעבוד בואו נבדוק נחזור לפה נרפרש ואנחנו רואים שהכלי הזה דלוק. מה בעצם אנחנו עושים איתו? קודם כל לחיצה פותח לנו