חיפוש
  • יניב אור

מערכת ניהול - React - חלק 5

עודכן ב: מרץ 21

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


בחזרה למערכת עצמה. את המידע מהשרת - רשימת חשבונות (accounts), למשל - אני מקבל בצורת מערך של אובייקטים - ובחלקים הקודמים אפשר לראות שאני משתמש במערך האובייקטים הזה, כמו שהוא, גם ב-state. זהו המערך rows. ההעתק שלו - המערך המסונן - filteredRows גם הוא נשאר בצורת מערך ב-state. על שני המערכים הללו אני מבצע פעולות שונות, כמו למשל map, reduce, filter, sort, slice וכן הלאה.


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


לכן, עשיתי שינוי רציני בקוד. שיניתי את rows ממערך לאובייקט ואת שאר הפונקציונליות בהתאם. נעבור בהמשך על הקוד שקשור בעניין הזה ואסביר. דבר נוסף, את כל נושא האותנטיקציה והניתוב, שהוזכרו ב-מערכת ניהול - React - חלק 1 העברתי לטיפול ה-Redux.


על מנת לעשות סדר בדברים, אעשה מעבר מהיר על המבנה והקוד של המערכת כולה.


מבנה עץ התיקיות

התיקיה src היא התיקיה הראשית ומתחתיה שאר האפליקציה, העץ נראה כך:


הרכיב הראשי הוא App ולאחר נקיונות ושיפוצים הוא נראה כך:


src/app/App.js


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


src/app/CustomRoute.js

האובייקט ב-state שאחראי על הניתובים נקרא router ויש לו מאפיין שנקרא routeState אשר יכול להיות באחד משלושת המצבים - כפי שהרחבתי על הנושא בחלק: מערכת ניהול - React - חלק 1.


1. מצב INIT: המצב ההתחלתי או במקרה שה-JWT token לא תקין. במצב הזה הרכיב שירונדר יהיה ה-Loading.

2. מצב REDIRECT: במקרה שה-JWT token תקין ו-redirect הוא true. הרכיב שירונדר יהיה רכיב Redirect שיעשה העברה ל-root (/). אני עושה redirect כשה-token מופיע ב-URL ואני רוצה "לנקות" את שורת הכתובת בדפדפן.

3. מצב ROUTE: במקרה שה-JWT token תקין ואין העברה. הרכיב שירונדר יהיה רכיב Switch שיכיל Routes שונים לפי הדפים במערכת.


הפונקציה handleAuth - שנקראת בזמן טעינת הרכיב CustomRoute - היא action creator שנמצא בתיקיית האקשנים.


src/store/actions/router/index.js

אז דבר ראשון יש קריאה ל-fetchToken שמנסה לאסוף את ה-JWT Token מה-localStorage ומה-URL. אם היה ב-localStorage, מחזירה ROUTE. אם היה ב-URL, שומרת ב-localStorage ומחזירה REDIRECT. אם JWT לא נמצא, מחזירה INIT.


אם fetchToken החזירה INIT, יש dispatch של verifyTokenFailure. אחרת, נקרא האקשן verifyTokenStarted. הן כרגע לא עושות הרבה חוץ מלהחזיר את ה-state.


בשלב הבא, אני שולח קריאת verify לשרת auth כשה-JWT נמצא ב-header. אם האימות נכשל, יש קריאה ל-verifyTokenFailure, כמו קודם לכן. אם האימות עבר בהצלחה, יש קריאה לאקשן verifyTokenSuccess עם תוצאת ה-fetchToken במשתנה routeState.


נעבור ל-reducers.


src/store/reducers/router/index.js


src/store/reducers/router/main.js

ברגע שה-state שב-routeState משתנה, הדפדפן מנתב בהתאם. כל זה קורה ב-CustomRoute.


המשך בחלק הבא:

מערכת ניהול - React - חלק 6


© 2023 by DO IT YOURSELF. Proudly created with Wix.com