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

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

עודכן ב: מרץ 21

עשיתי תיקון קטן, קצת ניקיון. קודם לכן הצגתי את הקוד של הקובץ: src/actions/accounts/index.js. הקובץ actions של posts די דומה. יש שם את הקטע בו אני אוסף את ה-token מה-localStorage ומצרף אותו כ-Authorization header לקריאת API. הוצאתי את קטע הקוד הזה משם ופיצלתי אותו לשני מקומות. ל-service נפרד שנקרא storage ומטפל בכל מה שקשור ל-localStorage ולפונקציות מתאימות ב-service ה-auth.


את קטע הקוד הזה:

שיניתי לקריאה לפונקציה authHeader:


וב-service ה-auth הפונקציה authHeader אוספת את ה-token מה-service של ה-storage בעזרת הפונקציה storageGet. מעבר לזה, שיניתי בקובץ הזה את כל הקריאות ל-localStorage לשימוש בפונקציות storageSet ו-storageGet.


src/services/auth.js


השירות של ה-storage נראה כך:

פשוט. אם ארצה לעדכן ולשפר, יהיה נוח יותר עכשיו.


הדבר הבא שאותו אמשיך לפתח זה את ה-reducer של כל אחת מהישויות - וה-state ההתחלתי. בקובץ src/reducers/accounts/index.js שצירפתי למעלה (וכנ"ל לגבי posts), אפשר לראות שה-state מקבל כערך התחלתי מערך ריק. מעבר לזה, התשובה מהשרת API היא אובייקט JSON שמכיל שני שדות: count שזה מספר התוצאות הכולל, ללא שימוש בסינון ו-rows שזה המידע הראשי שהוא מערך של אובייקטים. כרגע, אני לא עושה שימוש ב-count ואת המערך הריק של ה-state מחליף המערך של המידע, rows.



שרת ה-API יכול לקבל בשורת הכתובת מספר פרמטרים:

node-api-accounts/src/api/index.js

* אגב, אלו פרמטרים מובנים מהספריה querymen שה-generator-rest עושה בה שימוש.


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


למבנה של ה-state אני רוצה להוסיף הגדרות נוספות: ה-schema שהוזכרה למעלה ונמצאת בתיקיית reducer של כל ישות - ומידע נוסף לתצוגה, כמו כותרת ראשית וכדומה.


אז כתבתי initialState נפרד לכל ישות ומחקתי את הקובץ schema.js הזמני שהכיל את המידע על השדות (fields). ה-initialState נראה כך:


src/reducers/accounts/initialState.js


החלק ב-reducer שאוסף את המידע מהשרת נראה כך:

בינתיים אני מעדכן את count ואת rows.


את ניהול ה-store שנעשה בכל דף ישות (Views/Accounts, למשל) העברתי ל-Entity. כך אני נמנע משכפולי קוד מיותרים ומאפשר יותר מודולריות.


לאחר הנקיונות, דף ה-Accounts נראה כך:

src/components/Views/Accounts.js


ודף ה-Entity נראה כך:

src/components/Views/Entity.js

אני מעביר מ-Accounts ל-Entity כ-type את שם הישות כפי שהיא מופיעה ב-store. במקרה שלנו accounts או posts. כמו כן, אני מעביר את הפונקציה שאוספת מה-API את מערך האובייקטים - במקרה של accounts, הפונקציה getAccounts. יש מיפוי של הפונקציה הזאת ל-getEntities ב-Entity.


ל-state אני מתחבר באמצעות useSelector ומשתמש ב-type כדי לבחור את ה-state של הישות הרלוונטית. ברגע ש-Entity נטען עם ה-props שקיבל מ-Accounts, הוא קורא ל-getEntities שקוראת ל-getAccounts. מכאן מתבצע התהליך של הבאת מידע מהשרת, עדכון ה-state, רנדור מחדש של Entity שמרנדר שוב את הטבלה (Table) עם המידע (rows) שמועבר למאפיין data.


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


הקובץ של הטבלה נראה כך:

src/components/Common/Table/index.js

החלק הרלוונטי הוא כל מה שקשור ל-pagingBtnClicked.


הרכיב לדפדוף כתוב בקובץ נפרד.

src/components/Common/Table/PagingBar.js



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

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


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