שימוש ברידקס - Redux

תמלול ההרצאה: שימוש ברידקס - Redux

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

1. 00:02

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

2. 00:24

   ואנחנו רוצים בהוספה של מוצר ואנחנו רוצים בעדכון ובמחיקה. איך אנחנו משלבים את זה? מאוד סימפל בעזרת ה-dispatch וה-get state אנחנו יכולים לגשת לכל אחד מהמקומות שמשתמשים עם המידע ואו לבצע dispatch או לבצע get state בואו נראה איך אחד אחד אז product list סיימנו בואו ניגש לפרודקט details נבצע את זה במהירות הנה יש לנו כאן את הפרודקט

3. 00:56

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

4. 01:15

   אז מה שאנחנו רוצים לעשות זה להביא את כל המוצרים, const products, store, get state, product state, products, והנה יש לנו את כל המוצרים.

5. 01:30

   באמת אולי נחפש כבר את המוצר הספציפי שאנחנו רוצים, ניגש ל-Find ונאתר מוצר שה-ID שלו שווה ל-ID שהתקבל, פה אנחנו צריכים פלוס כי זה Number וזהו, אין לנו שום צורך בכל זה, אין לנו צורך ללכת ל-Back End, ביי ביי, והנה אנחנו יכולים להשתמש עם המוצר עצמו, זה יהיה Get Details הזה.

6. 02:00

   בואו נבדוק את get details, הנה צ'אי והנה אנחנו רואים את צ'אי, הכל עובד. בואו נבצע את זה בהוספה, ניגש ל-add product, ובואו ניגש לפה, אני רואה שבכל מקום אנחנו צריכים להוסיף את ה-any הזה, וזה אנחנו לא כל כך צריכים, ויש לנו כאן שליחת המידע לשרת.

7. 02:23

   זה בסדר, אני כן רוצה לשלוח את המידע לבק אנד, כי אין אותו בבק אנד, אוקיי? זה מוצר חדש שהיוזר הוסיף, אבל אחרי ששלחתי אותו ל-Backend והוא נמצא לי, פה אני רוצה להוסיף אותו ל-Redux.

8. 02:38

   Store.Dispatch כי אני רוצה לשלוח אותו ואנחנו רוצים To Add Product Action ולתת לו את ה-Product To Add. ה-Product To Add, אני ארשום אותו פה, האמת לא, בעצם זה יהיה ה-Response Data.

9. 02:57

   זה ה-Product To Add, אפשר האמת, Product To Add דאטה שזה יהיה קצת יותר ברור מה אנחנו שולחים.

10. 03:06

    שימו לב שאני לא שולח את זה כי זה חסר לו ID. ה-Backend מביא לי מוצר שכולל ID ואולי הוא כולל עוד כל מיני דברים שהדאטאבייס יצר ואז אותו אני רוצה, את המוצר האמיתי שהדאטאבייס החזיר לי.

11. 03:23

    והנה יש לנו עכשיו יכולת שהמוצר הזה בנוסף לזה שהוא נשלח ל-Back הוא גם נמצא ב-Global State אצלנו. בואו ניגש ונוסיף איזשהו מוצר אז בואו ניגש ונבדוק את זה נוסיף אורנג' פרייס 10 סטוק 100 choose file in a orange open add אנחנו רואים שהוא הוסיף את זה לבאק ואם אנחנו יורדים פה למטה אנחנו אמורים לראות את האורנג' החדש שהתווסף אורנג' 10 100 אתם

12. 04:01

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

13. 04:12

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

14. 04:26

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