Lägga till en reducer i ett Redux-applikation

I föregående lektion skapade vi komponenten UserReaction så att varje produkt även skulle ha användarreaktioner. Nu behöver vi skriva en reducer som kommer att hantera räknaren för reaktioner när användaren klickar på knappen för en viss reaktion.

Låt oss öppna vår produktapplikation, och i den filen productsSlice.js med alla reducers. Nu i egenskapen reducers skapar vi ytterligare en reducer reactionClicked (vi kan placera den först - före productAdded, även om det inte spelar någon roll). Som vanligt, skicka den parametrarna state och action:

reactionClicked(state, action) {},

Och nu inuti klammerparenteserna, som vi lämnade tomma i föregående steg, skriver vi koden för den. Först extraherar vi produktens id från payload-objektet action och reaktionens namn:

const { productId, reaction } = action.payload

Sedan från det passerade tillståndet får vi den önskade produkten:

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

Och om en sådan produkt finns, ökar vi värdet för den passerade reaktionen med 1:

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

Det var allt, vår kod för reactionClicked är klar:

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

Låt oss i slutet av filen lägga till export av den resulterande action creator:

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

Här är det nödvändigt att notera två viktiga punkter. Som ni minns från tidigare lektioner - att uppdatera värdet direkt så här i reducerkoden är inte tillåtet (titta på den här raden: reactions[reaction]++), men vi kommer undan med det, för att vi gör det inuti createSlice, som använder biblioteket Immer. Det kommer att se till att omvandla vår kod till en "säker" uppdatering av värdet. Detta tillåter oss att skriva komplexa saker på ett enklare sätt.

Nästa sak att komma ihåg är att objektet action bör innehålla minimal möjlig mängd information - bara för att indikera vad som hände. Gör inga beräkningar i den. Alla beräkningar för att uppdatera tillståndet bör göras i reducern, här kan du skriva så mycket logik för detta som behövs.

Öppna din studentapplikation och i filen studentsSlice.js lägg till ytterligare en reducer voteClicked i fältet reducers, som visas i lektionen. Skriv koden för den. Uppgiften för din reducer är att öka värdet för vote (eller röst), som klickades på, för den aktuella studenten, med 1 när användaren klickar.

I slutet av filen, glöm inte att exportera den resulterande action creator voteClicked.