Toevoegen van een reducer aan de Redux applicatie

In de vorige les hebben we de component UserReaction gemaakt zodat elk product ook gebruikersreacties heeft. Nu moeten we een reducer schrijven die de reactieteller zal verwerken wanneer de gebruiker op een knop van een bepaalde reactie klikt.

Laten we onze productenapplicatie openen, en daarin het bestand productsSlice.js met alle reducers. Nu gaan we in de eigenschap reducers nog een reducer reactionClicked aanmaken (we kunnen deze eerste plaatsen - vóór productAdded, hoewel dat niet uitmaakt). Zoals gewoonlijk, geven we hem de parameters state en action mee:

reactionClicked(state, action) {},

En nu schrijven we, binnen de accoladen die we leeg hebben gelaten in de vorige stap, de code ervoor. Ten eerste halen we de product-id uit de payload van het action object en de naam van de reactie:

const { productId, reaction } = action.payload

Vervolgens halen we het juiste product uit de doorgegeven state:

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

En als zo'n product bestaat, verhogen we de waarde van de doorgegeven reactie met 1:

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

Dat is alles, onze code voor reactionClicked is klaar:

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

Laten we aan het einde van het bestand de export van de verkregen action creator toevoegen:

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

Hier zijn twee belangrijke punten om op te merken. Zoals je je herinnert uit eerdere lessen - het is niet toegestaan om de waarde rechtstreeks zo in de reducercode bij te werken (kijk maar naar deze regel: reactions[reaction]++), maar wij komen ermee weg, omdat we het doen binnen createSlice, dat de Immer-bibliotheek gebruikt. Deze zorgt ervoor dat onze code wordt omgezet in een "veilige" update van de waarde. Dit stelt ons in staat om complexe dingen op een eenvoudigere manier te schrijven.

Het volgende om te onthouden - het object action moet een minimaal mogelijke hoeveelheid informatie bevatten - alleen maar om aan te geven wat er is gebeurd. Het is niet de bedoeling om er berekeningen in te doen. Alle berekeningen voor het bijwerken van de state moeten in de reducer gebeuren, hier kun je zoveel logica voor schrijven als nodig is.

Open je applicatie met studenten en voeg in het bestand studentsSlice.js nog een reducer voteClicked toe in het veld reducers, zoals getoond in de les. Schrijf de code ervoor. De taak van je reducer is om bij een klik de waarde van vote (of stem), waarop geklikt is, voor die student, met 1 te verhogen.

Vergeet aan het einde van het bestand niet om de verkregen action creator voteClicked te exporteren.