Redux հավելվածի աշխատանքի քննարկում
Նախորդ դասերին մենք իրականացրեցինք բոլոր բաղադրիչները, որոնք անհրաժեշտ են Redux հավելվածի աշխատանքի համար: Եկեք ամփոփենք և համառոտ անցնենք մեր հավելվածի աշխատանքի հիմնական փուլերին ապրանքների հետ:
Առաջին գործարկման ժամանակ մեր հավելվածը դուրս է բերում
պահեստից երկու ապրանքների ցուցակը օգտագործելով
useSelector և ցուցադրում է դրանք էկրանին: Էկրանին
նաև ցուցադրվում է ձև, որտեղ մենք կարող ենք մուտքագրել
նոր ապրանքի տվյալները: Երբ օգտատերը սեղմում է
պահպանել կոճակը, ապա կոճակի մշակիչը ուղարկում է
productAdded action, որը պարունակում է նոր
ապրանքի տվյալները, որոնք օգտատերը մուտքագրել է ձևում:
Ռեդյուսեր ֆունկցիան, որը մենք գրել էինք
ապրանքների սլայսի համար, ստանում է այս action-ը և ավելացնում է
ապրանքների զանգվածում նոր ապրանքի օբյեկտը:
Պահեստը տեղեկացնում է բաղադրիչներին, որ պահվող state տվյալները
փոխվել են: Մեր ProductsList բաղադրիչը կարդում է
փոփոխված զանգվածը, կանչում է 렌더িং, արդյունքում
որը մենք տեսնում ենք ապրանքների ցուցակում ավելացված ապրանքը:
Այժմ բրաուզերում բացենք Redux DevTools-ը և ավելացնենք
հավելվածում ևս մեկ ապրանք, ապա նայենք
Log monitor ներդիրին, այստեղ մենք կարող ենք տեսնել
թե ինչպիսին էր մեր state-ը հավելվածի գործարկման ժամանակ, և
ինչպես այնուհետև, պահպանել կոճակը սեղմելուց հետո,
հայտնվեց action: Մենք կարող ենք տեսնել դրա
payload հատկությունը և փոփոխությունները գլոբալ state-ում:
Հաջորդ գլխում մենք ավելի հիմնավոր կաշխատենք տվյալների հետ մեր Redux հավելվածում:
Գործարկեք ձեր ուսանողների հավելվածը: Բացեք Redux DevTools-ը բրաուզերում: Էջի ձևի մեջ մուտքագրեք ձեր հավելվածի տվյալները ևս մեկ ուսանողի համար և պահպանեք դրանք: Նայեք աշխատանքի արդյունքներին Redux DevTools-ի Log monitor ներդիրում:
Ավելացրեք ևս մեկ ուսանող և նորից ուշադրություն դարձրեք փոփոխություններին Log monitor ներդիրում:
