Legge til en reducer i Redux-applikasjonen

I forrige leksjon opprettet vi en komponent UserReaction slik at hvert produkt også skulle ha brukerreaksjoner. Nå må vi skrive en reducer som vil håndtere telleren for reaksjoner når brukeren klikker på knappen for en bestemt reaksjon.

La oss åpne applikasjonen vår med produktene, og i den filen productsSlice.js med alle reducerne. Nå i egenskapen reducers vil vi opprette en ny reducer reactionClicked (vi kan plassere den først - foran productAdded, selv om det ikke spiller noen rolle). Som vanlig, sender vi den parameterne state og action:

reactionClicked(state, action) {},

Og nå inne i krøllparentesene, som vi lot stå tomme i forrige trinn, skriver vi koden for den. Først vil vi trekke ut produktets id fra payload i action-objektet og reaksjonens navn:

const { productId, reaction } = action.payload

Deretter henter vi det aktuelle produktet fra den oppgitte staten:

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

Og hvis et slikt produkt finnes, øker vi verdien for den oppgitte reaksjonen med 1:

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

Det er alt, koden vår for reactionClicked er klar:

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

La oss til slutt i filen legge til eksport av den resulterende action creator-en:

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

Her er det nødvendig å merke seg to viktige punkter. Som du husker fra tidligere leksjoner - det er ikke lov å oppdatere verdien direkte slik i koden til reduceren (se på denne linjen: reactions[reaction]++), men vi kan komme unna med det fordi vi gjør det inni createSlice, som bruker Immer-biblioteket. Det vil ta seg av å konvertere koden vår til en "trygg" oppdatering av verdien. Dette lar oss skrive komplekse ting på en enklere måte.

Neste ting å huske på - at action-objektet skal inneholde minst mulig informasjon - bare nok til å indikere hva som skjedde. Det er ikke verdt å gjøre noen beregninger i den. Alle beregninger for å oppdatere staten bør gjøres i reduceren, her kan du skrive så mye logikk for dette som nødvendig.

Åpne applikasjonen din med studentene og i filen studentsSlice.js legg til enda en reducer voteClicked i feltet reducers, som vist i leksjonen. Skriv koden for den. Oppgaven til din reducer er - ved klikk å øke verdien for vote (eller stemme), som ble klikket på, for den gitte studenten, med 1.

I slutten av filen, ikke glem å eksportere den resulterende action creator-en voteClicked.