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

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

עודכן ב: מרץ 21

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


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


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


הפונקציה הזאת, למשל:

src/services/api/token.js (מתוך הקובץ)


הפכה להיות הצורה הבאה:

src/services/api/token.js (מתוך הקובץ)


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


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


לאחר התיקון, מבנה תיקיית ה-actions נראה כך:

עץ התיקיות מסודר לפי עץ ה-state ב-store. לכל רכיב שלושה קבצים:

- הקובץ types.js מכיל את ה-constants של ה-actions.

- הקובץ creators.js מכיל את ה-actions creators.

- הקובץ index.js עושה שימוש ב-creators בעזרת dispatch.


אני אתן כדוגמא את form:


src/store/actions/entities/form/types.js


src/store/actions/entities/form/creators.js


src/store/actions/entities/form/index.js


מבחינת ה-reducers, עשיתי תיקונים קוסמטיים במחיקת ה-return והסוגריים המסולסלים - כמו שהראיתי למעלה, בקובץ token.js. הקובץ reducers של form, למשל, נראה כך:


src/store/reducers/entities/main/form.js


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

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


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