Tilføjelse af reducer til Redux applikation

I den forrige lektion oprettede vi komponenten UserReaction, så hvert produkt også kunne have brugerreaktioner. Nu skal vi skrive en reducer, som vil håndtere tælleren for reaktioner, når brugeren klikker på knappen for en bestemt reaktion.

Lad os åbne vores applikation med produkter, og i den filen productsSlice.js med alle reducererne. Nu i egenskaben reducers opretter vi en reducer mere reactionClicked (vi kan placere den først - før productAdded, selvom det er ligegyldigt). Som sædvanlig sender vi den parametrene state og action:

reactionClicked(state, action) {},

Og nu inde i krølleparenteserne, som vi efterlod tomme i forrige trin, skriver vi koden for den. For det første ekstraherer vi produktets id fra payload objektet action og reaktionens navn:

const { productId, reaction } = action.payload

Derefter fra den passede state henter vi det ønskede produkt:

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

Og hvis sådan et produkt findes, øger vi værdien af den passede reaktion med 1:

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

Det er alt, vores kode 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]++
	}
},

Lad os til sidst i filen tilføje eksport af den oprettede action creator:

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

Her er det vigtigt at bemærke to punkter. Som du husker fra tidligere lektioner - det er ikke tilladt at opdatere værdien direkte på denne måde i reducerkoden (se på denne linje: reactions[reaction]++), men vi kan slippe afsted med det, fordi vi gør det inde i createSlice, som bruger biblioteket Immer. Det sørger for at omdanne vores kode til en "sikker" opdatering af værdien. Dette tillader os at skrive komplekse ting på en enklere måde.

Næste ting at huske - objektet action skal indeholde den minimalt mulige mængde information - kun nok til at angive hvad der skete. Der bør ikke foretages nogle beregninger i den. Alle beregninger for opdatering af state bør foretages i reduceren, her kan du skrive så meget logik til dette, som det er nødvendigt.

Åbn din applikation med studerende og i filen studentsSlice.js tilføj endnu en reducer voteClicked i feltet reducers, som vist i lektionen. Skriv koden for den. Din opgave for reduceren er - ved klik at forøge værdien af vote (eller stemme), som der blev klikket på, for den pågældende studerende, med 1.

Glem ikke at eksportere den oprettede action creator voteClicked i slutningen af filen.