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

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

עודכן ב: מרץ 21

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


src/components/Common/Table/PagingBar.js

הרכיב הזה לא משתמש ב-state ולא ב-store. בכל אירוע שמתרחש ברכיבים שמרכיבים אותו - נשלחת קריאה לפונקציה שהועברה אליו דרך Table ו-Entity - הפונקציה changePage. הפונקציה הזאת מקבלת ערכים משני סוגים:

- או constant מהערכים: GO_TO_FIRST_PAGE, GO_TO_PREV_PAGE וכן הלאה.

- או ערך מספרי שמציין את מספר העמוד


לסוג הראשון אחראים הכפתורים בדפדוף ולסוג השני אחראים שדה הטקסט וה-dropdown.


יש תיקון קטן שארצה לעשות בהמשך וזה להעביר את יצירת המערך של ה-PageDropdown ל-store - ולהעביר ל-PagingBar מערך מוכן.


את רכיב הטבלה ניקיתי.

src/components/Common/Table/index.js


ורכיב ה-Entity נראה כך:

src/components/Views/Entity.js

כשהרכיב נטען, נשלחת קריאה ל-getEntities ולאחר שרשרת של אירועים, ביניהם קריאה לשרת API והבאת הנתונים ממנו - ה-store מתמלא במידע. אני מביא מבסיס הנתונים את כל טבלת ה-accounts לדפדפן. חשוב לזכור.


מהסיבה הזאת אני מעביר לטבלה רק את המידע של העמוד הנוכחי - ראה slice. יכול להיות שבהמשך אעביר את החישוב הזה ואת החישובים האחרים שמופיעים כאן ל-reducer ואז הקובץ הזה יהיה נקי ומסודר יותר.


אני מעביר לטבלה פרמטרים נוספים, ביניהם הפונקציה changePage.


ל-accounts ול-posts הוספתי action של CHANGE_PAGE שמעביר ל-reducer מחרוזת (דף הבא, דף קודם וכו') או מספר עמוד ספציפי.


src/actions/accounts/index.js


ואת ה-reducer עדכנתי בצורה כזאת:


src/reducers/accounts/index.js

הפונקציה getPage נמצאת בקובץ helper נפרד ומבצעת את החישובים.


src/reducers/helpers.js



אז עשיתי צמצומים, נקיונות ושיפוצים - והעברתי קוד מפה לשם אבל יש משהו שלא מוצא חן בעיניי. העובדה שפתחתי תיקיות וקבצים נפרדים ל-accounts ול-posts - ב-actions וב-reducers. מדובר על שתי ישויות שיש לכל אחת בסיס נתונים, שרת API ומבחינת UI - שתיהן צריכות טבלה, וטופס להוספה ועדכון. סביר להניח שלכל אחת, בנוסף לדברים המשותפים, יהיו רכיבי UI שונים ופונקציונליות מעט שונה בהתאם. בכל מקרה, רוב הקוד הולך להיות זהה. כבר עכשיו, אם משווים את ה-reducer-ים של שתיהן, זה נראה כמו שכפול קוד. לא תקין.


לכן, הדבר הבא שאעשה זה אפטר משכפולי הקוד האלה ואשתמש כמה שיותר ב-Entity הכללי.


לאחר עבודה על המערכת, תיקנתי מה שרציתי. מחקתי את ה-accounts וה-posts מה-reducers וה-actions והעברתי את כל הקוד לטיפול ל-Entity. ה-initialsState כעת מורכב מהאובייקטים של שתי הישויות הללו. הוא נראה כך:

src/reducers/entity/initialState.js


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


src/actions/entity/index.js


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


src/reducers/entity/index.js


האזכורים הנוספים של accounts ו-posts במערכת הם רכיבי Views (כפי שהחלטתי לקרוא להם) שמכילים רכיב Entity עם המאפיין entity שיכול להיות, כרגע, accounts או posts.


רכיב ה-View של דף ה-Accounts, לדוגמא, נראה כך:


src/components/Views/Accounts.js

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


אני רוצה להדגיש את העובדה שאין קשר ישיר בין הדף Accounts וה-routes שמובילים לדף - לבין הישות accounts. אני יכול להשתמש ברכיב Entity עם accounts ב-entity - בכל מקום במערכת.


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

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


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