Kuongeza Reducer kwenye Programu ya Redux

Katika somo lililopita tuliumba komponeneti UserReaction ili kila bidhaa iwe na athari za watumiaji pia. Sasa tunahitaji kuandika reducer, ambayo itashughulikia kiwango cha kuhesabu athari wakati mtumiaji anapobofya kitufe cha athari fulani.

Wacha tufungue programu yetu ya bidhaa, na ndani yake faili productsSlice.js iliyo na reducers zote. Sasa katika sifa reducers tuunde reducer nyingine reactionClicked (tunaweza kuiweka mwanzoni - kabla ya productAdded, ingawa haijalishi). Kama kawaida, tupeane viingizo state na action:

reactionClicked(state, action) {},

Na sasa ndani ya mabano ya curly, ambayo tuliyacha wazi katika hatua iliyopita, tuandike kodi yake. Kwanza tutatoa kitambulisho cha bidhaa (id) kutoka kwenye payload kitu cha action na jina la athari:

const { productId, reaction } = action.payload

Kisha kutoka kwa hali (state) iliyopitwa tupate bidhaa inayohitajika:

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

Na ikiwa kuna bidhaa kama hiyo, basi tuongeze thamani ya athari iliyopitwa kwa 1:

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

Haya yote, kodi yetu kwa reactionClicked iko tayari:

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

Wacha mwishoni mwa faili tuongeze usafirishaji (export) wa muumba hatua (action creator) uliopatikana:

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

Hapa ni muhimu kukumbuka mambo mawili muhimu. Kama unavyokumbuka kutoka kwenye masomo yaliyopita - kusasisha thamani kwa njia ya moja kwa moja kwenye msimbo wa reducer hairuhusiwi (angalia mstari huu: reactions[reaction]++), lakini sisi tutaweza kukubalika kwa sababu tunafanya hivyo ndani ya createSlice, ambayo inatumia maktaba ya Immer. Na ndiyo itajihusisha na kuhakikisha kuwa msimbo wetu unabadilishwa kuwa usasishaji "salama" wa thamani. Hii inaturuhusu kuandika mambo magumu kwa njia rahisi zaidi.

Kitu kinachofuata, ambacho ni muhimu kukumbuka - kitu action kinapaswa kuwa na kiwango cha chini kinachowezekana cha habari - tu kwa ajili ya kuonyesha nini kimetokea. Haifai kufanya mahesabu yoyote ndani yake. Mahesabu yote kwa ajili ya kusasisha hali (state) yanafaa kufanywa kwenye reducer, hapa unaweza kuandika mantiki yoyote kwa ajili hiyo, kwa kadri itakavyohitajika.

Fungua programu yako ya wanafunzi na kwenye faili studentsSlice.js ongeza reducer nyingine voteClicked kwenye uwanja reducers, kama inavyoonyeshwa kwenye somo. Andika msimbo wake. Kazi ya reducer yako - wakati wa kubofya kuongeza thamani ya vote (au kura), ambayo ilibofywa, kwa mwanafunzi huyo, kwa 1.

Mwishoni mwa faili usisahau kusafirisha (export) muumba hatua (action creator) uliopatikana voteClicked.