Dodajanje reduktorja v Redux aplikacijo

V prejšnji lekciji smo ustvarili komponento UserReaction, da bi imel vsak izdelek tudi uporabniške reakcije. Zdaj moramo napisati reduktor, ki bo obdeloval števec reakcij ob kliku uporabnika na gumb določene reakcije.

Odprimo našo aplikacijo z izdelki, in v njej datoteko productsSlice.js z vsemi reduktorji. Zdaj v lastnosti reducers ustvarimo še en reduktor reactionClicked (lahko ga postavimo na prvo mesto - pred productAdded, čeprav to ni pomembno). Kot običajno, mu podajmo kot parametra state in action:

reactionClicked(state, action) {},

In zdaj znotraj zavitih oklepajev, ki smo jih pustili prazne na prejšnjem koraku, napišimo zanj kodo. Najprej bomo izvlekli id izdelka iz payload objekta action in ime reakcije:

const { productId, reaction } = action.payload

Nato iz podanega stanja (state) dobimo želeni izdelek:

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

In če tak izdelek obstaja, povečamo vrednost podane reakcije za 1:

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

To je vse, naša koda za reactionClicked je pripravljena:

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

Na koncu datoteke dodajmo izvoz nastalega ustvarjalca akcije (action creator):

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

Tukaj je potrebno opozoriti na dve pomembni točki. Kot se spomnite iz prejšnjih lekcij - posodabljati vrednost neposredno tako v kodi reduktorja ni dovoljeno (poglejte to vrstico: reactions[reaction]++), vendar nam bo to uspelo, ker to delamo znotraj createSlice, ki uporablja knjižnico Immer. Ta bo poskrbela, da bo našo kodo preoblikovala v "varno" posodobitev vrednosti. To nam omogoča, da zapletene stvari pišemo na enostavnejši način.

Naslednja stvar, ki si jo je treba zapomniti - objekt action mora vsebovati čim manjšo količino informacij - samo toliko, da označi, kaj se je zgodilo. V njem ne smemo opravljati nobenih izračunov. Vse izračune za posodobitev stanja (state) je treba opraviti v reduktorju, tukaj lahko za to napišemo toliko logike, kolikor je potrebno.

Odprite vašo aplikacijo s študenti in v datoteki studentsSlice.js dodajte še en reduktor voteClicked v polje reducers, kot je prikazano v lekciji. Napišite kodo zanj. Naloga vašega reduktorja je - ob kliku povečati vrednost vote (ali glasu), na katerega so kliknili, za danega študenta, za 1.

Na koncu datoteke ne pozabite izvoziti nastalega ustvarjalca akcije (action creator) voteClicked.