שיעור 41 – אנגולר NGRX + פרויקט

שלום לכולם,

השיעור למדנו על NGRX

דיברנו על 3 אבני היסוד של NGRX :

STORE  –

בגדול – ה   STORE הוא למעשה הוא ה State שלנו

מה נרצה לשמור ב STORE?

1. מידע שהגיע מ API – למניעת שליחת REQUEST  נוסף לשרת למשיכת הנתונים, והזרמה של הנתונים בכל האפליקציה.
2. כל מידע אחר שנרצה שיהיה נגיש בכל קומפוננטה.

מה לא כדאי לשמור ב STORE ?

1. מידע שאפשר להסתפק בשמירה שלו ברמת הקומפוננטה בלבד.
2. נתונים של טפסים, לא רואה סיבה שיש טעם לשמור ב STORE.
3.  non-serializeable data  – משהו שלא ניתן או כדאי לשמור במבנה של אובייקט

ACTION –

כדי לשמור על זרימת נתונים נכונה, שינויים במידע שקיים ב STORE לא מתבצעים ישירות על  ה STORE. הם מתבצעים על ידי קריאה לאירוע שנקרא ACTION.

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

דוגמאות:

1. LOGIN ACTION – יופעל לאחר שליחת טופס התחברות
2. RETRIVE-DATA – יופעל לאחר שקומפוננטה עלתה, כדי למשוך מידע קיים מ STORE.

 

REDUCER – 

זוהי ה-פונקציה, שאיתה נבצע שינויים ב STATE. הפונקציה פועלת באופן הבא:

מקבלת את ה STATE, ACTION – ומחזירה STATE חדש אחרי ביצוע ה ACTION.

 

בהמשך השיעור – בנינו אפליקציה שהיא סוג של COUNTER שמציג את המידע מ NGRX.

 

פרויקט גמר ANGULAR – דרישות:

1. לפחות 3 קומפוננטות.
2. לכתוב לפחות ב SERVICE אחד. (לא כולל האוטנטיקציה)
3. אפשר לעשות LOGIN עם google/facebook באמצעות firebase
4. חייב להיות ROUTING שמכיל גם guard להגנה על נתיבים מסויימים (משתמשים לא מחוברים לא יכולים לראות חלק מהתוכן)
5. חייב להיות שימוש ב API חיצוני 1 לפחות.
6. הפרויקט חייב להיות מנוהל ב GIT. בסיום העבודה יש לשלוח לינק ל GITHUB עם קובץ readme שמסביר על הפרויקט.

ההגשה של הפרויקט – עד 1/5/2020

 

קבצי השיעור להורדה