כיצד להפריד לוגיקה מממשק משתמש באמצעות רכיבי React | מאת אסמת איברהים

הועלה מחדש על ידי אפלטון

עוקב: 0

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

למה זה חשוב?

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

הידיים על

בואו נצלול לתוך הקוד ונראה 2 דוגמאות לפני ואחרי ה-refactoring.

בואו ניקח את הדוגמה הבאה וננסה להבין איך לגרום לזה לקרות:

import React, { useMemo } from 'react';
import useAxios from 'axios-hooks'; const TodoList = () => { const [{ data, loading, error }] = useAxios( `/`); const todoItems = useMemo( () => (data ? data.filter((item) => item.status === 'TODO') : []), [data], ); if (loading) return <div>Loading...</div>; if (error) return <div>Error</div>; return <div>{JSON.stringify(todoItems)}</div>;
}; export default TodoList;

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

האם אתה יכול לשים לב לחישוב הפשוט לחלץ את הפריטים עם סטטוס = TODO? אם תשובתך חיובית, אז אנחנו באותו עמוד.

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

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

import { useMemo } from 'react';
import useAxios from 'axios-hooks'; const useTodoList = () => { const [{ data, loading, error }] = useAxios( `/`); const todoItems = useMemo( () => (data ? data.filter((item) => item.status === 'TODO') : []), [data], ); return [{ data, loading, error, todoItems }];
}; export default useTodoList;

כפי שאתה יכול לראות, קראנו לזה "useTodoList". הוק הזה צריך להכיל את ההיגיון של רכיב TodoList.

אתה יכול לשים לב שאין לנו ממשק משתמש בקובץ, זה הוק מותאם אישית.

אבל איך צריך להיראות הרכיב הראשי "TodoList"?

import React from 'react'; import useTodoList from './useTodoList'; const TodoList = () => { const [{ data, loading, error, todoItems }] = useTodoList(); if (loading) return <div>Loading...</div>; if (error) return <div>Error</div>; return <div>{JSON.stringify(todoItems)}</div>;
}; export default TodoList;

פשוט, הא? בדיוק בגלל זה חשוב לבנות רכיבים שבהם ההיגיון העסקי אינו חלק מה-UI ולהתמודד עם ה-Custom Hook כ-API לרכיב שלכם.

מה לגבי התקשורת בין רכיבים כאשר כל רכיב עובד במצב עצמאי? זה יהיה הנושא המעניין שנעסוק בו במאמר הבא.