Ռեդյուսերները Redux-ում

Նախորդ դասին մենք createSlice ֆունկցիայի միջոցով ստեղծեցինք products ապրանքների համար նախատեսված հատված և ռեդյուսեր, որը կթարմացնի այս հատվածը, որը պահվում է store-ում: Կրկին հիշեցնեմ, որ Redux-ում state-ի տվյալները փոխվում են ռեդյուսերների միջոցով:

Պետք է հիշել, որ ռեդյուսերների վրա դրվում են մի շարք սահմանափակումներ: Ռեդյուսերը թարմացնում է state-ը միայն ընթացիկ state-ի և action օբյեկտի ստացված արժեքների հիման վրա, ապա որոշում է, թե ինչպես փոխել state-ը և վերադարձնում նրա նոր արժեքը:

Մենք գիտենք, որ լռելյայնորեն օբյեկտներն ու զանգվածները JavaScript-ում մուտացիոն են (փոփոխելի): Նաև մենք գիտենք, որ state-ը ուղղակիորեն փոխել չի կարելի, այդ դեպքում պետք է աշխատել միայն պատճենների հետ: Այս կանոնին պետք է ենթարկվի նաև ռեդյուսերը: Բայց նման տրամաբանության ձեռքով գրելը կարող է լինել բավականին հոգնեցուցիչ և բարդ զբաղմունք, և այստեղ օգնության է հասնում createSlice ֆունկցիան, որը օգտագործում է Immer գրադարանը, որը ձեր 'մուտացիոն' կոդը վերածում է 'ոչ մուտացիոնի': Այսպիսով, 'մեղանչել' և կյանքը պարզեցնել կարելի է միայն createSlice կամ createReducer ֆունկցիաներն օգտագործելիս:

Ռեդյուսերի սահմանափակումների թվին է պատկանում նաև ասինխրոն տրամաբանության օգտագործումը, պատահական արժեքների հաշվարկը և այլ "կողմնակի էֆեկտների" կատարումը: Իսկ այժմ, ավելի մոտիկից ծանոթանալով ռեդյուսերին, վերադառնանք մեր ապրանքներով հավելվածին:

Մեր հավելվածում կա store, որը մենք ստեղծել ենք նախորդ դասերին, բայց առայժմ դրա մեջ ոչինչ չկա: Եկեք բացենք մեր store.js ֆայլը և ավելացնենք դրա մեջ մի քիչ կոդ: Սկզբից ներմուծենք դրա մեջ ապրանքների համար նախատեսված reducer ֆունկցիան:

import productsReducer from '../parts/products/productsSlice'

Այժմ որպես ռեդյուսեր մենք կարող ենք նշել ներմուծված ֆունկցիան productsReducer:

export default configureStore({
	reducer: {
		products: productsReducer
	}
})

Վերևում նշված տողով մենք ասում ենք մեր store-ին, որ այժմ action առաջանալիս state.products հատվածի բոլոր տվյալները կ թարմացվեն productsReducer ռեդյուսերի կողմից:

Այժմ դուք կարող եք գործարկել հավելվածը (նկատեք, որ կոնսոլում անհետացել է անվավեր ռեդյուսերի վերաբերյալ նախազգուշացումը!), բրաուզերում բացել Redux DevTools-ը և շրջել նրա ներդիրներում: Օրինակ, սեղմելով State ներդիրի վրա Inspector ներդիրում մենք կարող ենք տեսնել մեր երկու օբյեկտները ապրանքներով, որոնք արտացոլվել են որպես state-ի սկզբնական արժեք հավելվածի առաջին գործարկման ժամանակ: Log monitor ներդիրում մենք տեսնում ենք, թե ինչ հատվածներ է ներառում գլոբալ state-ը - սա products հատվածն է, որը ներառում է երկու օբյեկտ: Նաև նայեք Chart ներդիրը:

Բացեք ձեր ուսանողներով հավելվածը և փոխեք store.js ֆայլի կոդը, ինչպես ցուցադրված է դասում:

Գործարկեք ձեր հավելվածը բրաուզերում և շրջեք Redux DevTools ընդլայնման ներդիրներում: