יצירת Redux AuthState

תמלול ההרצאה: יצירת Redux AuthState

הטקסט המלא של הדקות הראשונות בהרצאה «יצירת Redux AuthState» בקורס הווידאו של PracticU – כתוביות בעברית עם זמן התחלה לכל פסקה. כך תוכלו לקרוא ולחפש את הנושאים לפני שמתחילים ללמוד.

1. 00:02

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

2. 00:20

   מאוד פשוט, יש לנו פה אפשרות to register, זה קומפוננט ה-א', יש לנו אפשרות to log in, זה קומפוננט ה-ב', שתי הקומפוננטות האלה אמורות לקבל בחזרה את אובייקט היוזר.

3. 00:33

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

4. 00:49

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

5. 01:11

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

6. 01:21

   אז אנחנו ניגשים כרגע לתיקיית רידאקס ומייצרים לנו OutState PS, אני לא אקרא לו user state או users state אלא out state ש-out זה בעצם המונח שמדבר על כל האותנטיקיישן וכל האוטוריזיישן כי כל מה שהרידקס הזה צריך לעשות זה לאפשר לנו to register, to log in ו-to log out טוב איך אנחנו בונים בואו נתחיל עם ה-state שלנו הנה המחלקה ה-out state

7. 01:52

   ומה שאנחנו הולכים לקבל מה-back end זה קודם כל את הטוקן גם את אותו הטוקן אני רוצה לשמור ב-Level הראשי של האפליקציה. אתם תראו בהמשך למה.

8. 02:05

   אנחנו כמובן רוצים לשלוח אותו לשרת, אם אתם זוכרים את זה, בהדר שכתוב בו "Authorization", "Barer" ואז ה-Token. אוקיי, איפה אני שולח? אני שולח בכל מיני מקומות אחרים.

9. 02:17

   אז גם הטוקן נמצא ב-Application Level. בנוסף לטוקן שקיבלתי מה-Backend, אני רוצה לדעת מי זה היוזר. סוג שלו זה כמובן יוזר המודל. שאנחנו בנינו הנה המחלקה יש לנו את הטוקן ויש לנו את היוזר טוקן מכיל בתוך עצמו בצורה מקודדת את היוזר אבל אנחנו הולכים לשלוף אותו ממנו ולשים

10. 02:41

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

11. 03:02

    אלה הפעולות שאנחנו יכולים לעשות. אנחנו יכולים to register, בואו נכניס לתוכו register, אנחנו יכולים to log in, נכניס לתוכו log in, ואנחנו יכולים to log out.

12. 03:17

    נכניס לתוכו log out בהתאם לכל הטכניקה שלמדנו ב-Redux. הדבר הבא שאנחנו רוצים זה לא זה, אלא export interface out action, אנחנו רוצים type זה סוג out action type ואנחנו רוצים payload הוא any ומה זה אומר שהוא any זה אומר שאנחנו רוצים לשלוח את הפרטים של הtoken באמת הוא יכול להיות string לפי

13. 03:50

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

14. 04:13

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

15. 04:35

    מחזיר אאוט אקשן שבנינו לפני שנייה ובואו נחזיר טייפ. זה יהיה אאוט אקשן טייפ רג'יסטר והפיילוד יהיה הטוקן שקיבלנו.

16. 04:50

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