Flux היא ארכיטקטורת אפליקציות שפייסבוק משתמשת בה באופן פנימי לבניית אפליקציית האינטרנט בצד הלקוח עם React. זו לא ספריה ולא מסגרת. זו לא ספריה ולא מסגרת. זוהי מעין ארכיטקטורה המשלימה את React as view ועוקבת אחר הרעיון של מודל זרימת נתונים חד כיוונית. זה שימושי כאשר לפרויקט יש נתונים דינמיים, ועלינו לעדכן את הנתונים בצורה יעילה. זה מקטין את שגיאות זמן הריצה.
למצוא את האייפון שלי מאנדרואיד
ליישומי Flux יש שלושה תפקידים מרכזיים בהתמודדות עם נתונים:
- שדר
- חנויות
- צפיות (רכיבי React)
כאן, אתה לא צריך להתבלבל עם דגם Model-View-Controller (MVC). אמנם, בקרים קיימים בשניהם, אך תצוגות בקר Flux (תצוגות) נמצאות בראש ההיררכיה. הוא שולף נתונים מהחנויות ולאחר מכן מעביר את הנתונים האלה לילדיהם. בנוסף, יוצרי פעולות - שיטות מסייעות של שולח המשמשות לתיאור כל השינויים האפשריים באפליקציה. זה יכול להיות שימושי כחלק רביעי במחזור העדכון של Flux.
מבנה וזרימת נתונים
ביישום Flux, הנתונים זורמים בכיוון אחד (חד כיווני). זרימת נתונים זו היא מרכזית בדפוס השטף. השולח, החנויות והתצוגות הם צמתים עצמאיים עם כניסות ויציאות. הפעולות הן אובייקטים פשוטים המכילים נתונים חדשים ומאפיין סוג. כעת, הבה נבחן את המרכיבים השונים של ארכיטקטורת השטף בזה אחר זה.
שדר
זהו מרכז מרכזי עבור אפליקציית React Flux ומנהל את כל זרימת הנתונים של אפליקציית Flux שלך. זהו רישום של התקשרויות חוזרות לחנויות. אין לו מודיעין ממשי משלו, והוא פשוט פועל כמנגנון להפצת הפעולות לחנויות. כל החנויות רושמות את עצמן ומספקות התקשרות חוזרת. זה מקום שטיפל בכל האירועים שמשנים את החנות. כאשר יוצר פעולה מספק פעולה חדשה לשולח, כל החנויות מקבלות את הפעולה הזו דרך ההתקשרות חזרה ברישום.
ל-API של השולח יש חמש שיטות. אלו הם:
כיצד להמיר str ל-int
| SN | שיטות | תיאורים |
|---|---|---|
| 1. | הירשם() | הוא משמש לרישום התקשרות חוזרת של מטפל פעולה של חנות. |
| 2. | בטל רישום() | הוא משמש לביטול רישום של התקשרות חוזרת של חנות. |
| 3. | לחכות ל() | הוא משמש להמתנה להתקשרות חזרה שצוינה תחילה. |
| 4. | לְשַׁגֵר() | הוא משמש לשיגור פעולה. |
| 5. | isDispatching() | הוא משמש כדי לבדוק אם השולח שולח כעת פעולה. |
חנויות
הוא מכיל בעיקר את מצב היישום והלוגיקה. זה דומה לדגם ב-MVC מסורתי. הוא משמש לשמירה על מצב מסוים בתוך האפליקציה, מעדכן את עצמו בתגובה לפעולה ופולט את אירוע השינוי כדי להתריע על תצוגת הבקר.
img css align
צפיות
זה נקרא גם תצוגות בקר. הוא ממוקם בחלק העליון של השרשרת כדי לאחסן את ההיגיון ליצור פעולות ולקבל נתונים חדשים מהחנות. זהו רכיב React להאזין לאירועי שינוי ומקבל את הנתונים מהחנויות ולעבד מחדש את האפליקציה.
פעולות
שיטת ה-Dispatcher מאפשרת לנו להפעיל שיגור לחנות ולכלול מטען של נתונים, שאנו מכנים פעולה. זהו יוצר פעולה או שיטות מסייעות המעבירות את הנתונים לשולח.
היתרון של Flux
- זהו מודל זרימת נתונים חד כיווני שקל להבין אותו.
- זהו קוד פתוח ויותר דפוס עיצובי מאשר מסגרת רשמית כמו ארכיטקטורת MVC.
- יישום השטף קל יותר לתחזוקה.
- חלקי יישום השטף מנותקים.