Dodavanje reducera u Redux aplikaciju

U prošloj lekciji smo napravili komponentu UserReaction kako bi svaki proizvod imao i reakcije korisnika. Sada nam je potrebno da napišemo reducer, koji će obrađivati brojač reakcija pri kliku korisnika na dugme za odgovarajuću reakciju.

Hajde da otvorimo našu aplikaciju sa proizvodima, a u njoj fajl productsSlice.js sa svim reducerima. Sada u svojstvu reducers kreiramo još jedan reducer reactionClicked (možemo ga staviti prvi - ispred productAdded, iako to nije bitno). Kao i obično, prosledimo mu parametrima state i action:

reactionClicked(state, action) {},

A sada unutar vitičastih zagrada, koje smo ostavili prazne na prethodnom koraku, napišimo za njega kod. Prvo ćemo izvući id proizvoda iz payload objekta action i naziv reakcije:

const { productId, reaction } = action.payload

Zatim iz prosleđenog steita dobijemo potrebni proizvod:

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

I ako takav proizvod postoji, povećaćemo vrednost prosleđene reakcije za 1:

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

To je sve, naš kod za reactionClicked je spreman:

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

Hajde na kraju fajla da dodamo eksport dobijenog action creator-a:

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

Ovde je neophodno istaći dva važna momenta. Kako se sećate iz prethodnih lekcija - ažurirati ovako direktno vrednost u kodu reducera ne sme (pogledajte ovu liniju: reactions[reaction]++), ali nama će to proći jer to radimo unutar createSlice, koji koristi biblioteku Immer. Ona će se pobrinuti da preuredi naš kod u "bezbedno" ažuriranje vrednosti. Ovo nam omogućava da pišemo kompleksne stvari na jednostavniji način.

Sledeće, što je neophodno zapamtiti - objekat action treba da sadrži minimalno moguću količinu informacija - samo onoliko da bi se ukazalo na to šta se desilo. Ne treba u njemu raditi bilo kakve proračune. Svi proračuni za ažuriranje steita treba da se rade u reduceru, ovde možete napisati za to onoliko logike, koliko je potrebno.

Otvorite vašu aplikaciju sa studentima i u fajlu studentsSlice.js dodajte još jedan reducer voteClicked u polje reducers, kao što je pokazano u lekciji. Napišite kod za njega. Zadatak vašeg reducera - pri kliku da povećava vrednost vote (ili glasa), na koji je kliknuto, za datog studenta, za 1.

Na kraju fajla ne zaboravite da eksportujete dobijeni action creator voteClicked.