Redux հավելվածում reducer-ի ավելացում

Նախորդ դասում մենք ստեղծեցինք UserReaction բաղադրիչը, որպեսզի յուրաքանչյուր ապրանք ունենա նաև օգտագործողի ռեակցիաներ: Այժմ մեզ անհրաժեշտ է գրել reducer, որը կմշակի ռեակցիաների հաշվիչը, երբ օգտագործողը կտտացնի այս կամ այն ռեակցիայի կոճակին:

Եկեք բացենք մեր ապրանքների հավելվածը, և դրա մեջ productsSlice.js ֆայլը բոլոր reducer-ներով: Այժմ reducers հատկության մեջ կստեղծենք ևս մեկ reducer reactionClicked (կարող ենք այն դնել առաջինը - productAdded-ից առաջ, չնայած դա նշանակություն չունի): Ինչպես միշտ, կփոխանցենք նրան պարամետրերով state և action:

reactionClicked(state, action) {},

Իսկ այժմ նախորդ քայլում դատարկ թողած գանգուր փակագծերի ներսում գրենք դրա համար կոդ: Նախ և առաջ մենք կարդացնենք ապրանքի id-ն action օբյեկտի payload-ից և ռեակցիայի անվանումը:

const { productId, reaction } = action.payload

Այնուհետև փոխանցված state-ից կստանանք անհրաժեշտ ապրանքը:

const currentProduct = state.find(product => product.id === productId)

Եվ եթե նման ապրանք կա, ապա կավելացնենք փոխանցված ռեակցիայի արժեքը 1-ով:

if (currentProduct) {
	currentProduct.reactions[reaction]++
}

Ահա և ամենը, մեր կոդը reactionClicked-ի համար պատրաստ է:

reactionClicked(state, action) {
	const { productId, reaction } = action.payload
	const currentProduct = state.find(product => product.id === productId)
	if (currentProduct) {
		currentProduct.reactions[reaction]++
	}
},

Եկեք ֆայլի վերջում ավելացնենք ստացված action creator-ի արտահանումը:

export const {
	reactionClicked,
	productAdded,
	productUpdated
} = productsSlice.actions

Այստեղ անհրաժեշտ է նշել երկու կարևոր կետ: Ինչպես հիշում եք նախորդ դասերից - այսպես ուղղակիորեն թարմացնել արժեքը reducer-ի կոդում անհնար է (նայեք այս տողին: reactions[reaction]++), բայց մեզ դա կներառվի, քանի որ մենք դա անում ենք createSlice-ի ներսում, որն օգտագործում է Immer գրադարանը: Այն և կհոգա, որ մեր կոդը վերափոխի «անվտանգ» արժեքի թարմացման: Սա մեզ թույլ է տալիս գրել բարդ բաներ ավելի պարզ եղանակով:

Հաջորդը, ինչը պետք է հիշել - action օբյեկտը պետք է պարունակի նվազագույն հնարավոր տեղեկություն՝ միայն նշելու համար, թե ինչ է տեղի ունեցել: Չարժե դրա մեջ որևէ հաշվարկ կատարել: Բոլոր հաշվարկները state-ը թարմացնելու համար պետք է կատարվեն reducer-ում, այստեղ դրա համար կարելի է գրել ցանկացած տրամաբանություն, որքան էլ որ այն պահանջվի:

Բացեք ձեր ուսանողների հավելվածը և studentsSlice.js ֆայլում ավելացրեք ևս մեկ reducer voteClicked reducers դաշտում, ինչպես ցուցադրված է դասում: Գրեք դրա համար կոդ: Ձեր reducer-ի խնդիրն է՝ կտտոցի դեպքում ավելացնել vote (կամ ձայնի) արժեքը, որի վրա կտտացել են, տվյալ ուսանողի համար, 1-ով:

Ֆայլի վերջում մի մոռացեք արտահանել ստացված voteClicked action creator-ը: