Adăugarea unui reducer în aplicația Redux

În lecția precedentă, am creat componentul UserReaction astfel încât fiecare produs să aibă și reacții ale utilizatorilor. Acum trebuie să scriem un reducer care va procesa contorul de reacții atunci când utilizatorul dă clic pe butonul unei reacții sau alteia.

Să deschidem aplicația noastră cu produsele, iar în ea fișierul productsSlice.js cu toți reducerii. Acum, în proprietatea reducers să creăm încă un reducer reactionClicked (îl putem pune primul - înainte de productAdded, deși nu contează). Ca de obicei, îi vom transmite ca parametri state și action:

reactionClicked(state, action) {},

Și acum, în interiorul acoladelor pe care le-am lăsat goale în pasul anterior, să-i scriem codul. În primul rând, vom extrage id-ul produsului din payload al obiectului action și numele reacției:

const { productId, reaction } = action.payload

Apoi, din starea transmisă, vom obține produsul necesar:

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

Și dacă un astfel de produs există, atunci vom incrementa valoarea reacției transmise cu 1:

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

Și gata, codul nostru pentru reactionClicked este gata:

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

Să adăugăm la sfârșitul fișierului exportul creatorului de acțiuni obținut:

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

Aici este necesar să notăm două momente importante. După cum vă amintiți din lecțiile anterioare - actualizarea directă a valorii în codul reducerului în acest fel nu este permisă (uitați-vă la această linie: reactions[reaction]++), dar noi vom scăpa cu asta, pentru că o facem în interiorul createSlice, care folosește biblioteca Immer. Ea va avea grijă să transforme codul nostru într-o actualizare "sigură" a valorii. Acest lucru ne permite să scriem lucruri complexe într-un mod mai simplu.

Următorul lucru de reținut este că obiectul action trebuie să conțină cantitatea minimă posibilă de informații - doar cât să indice ce s-a întâmplat. Nu trebuie să faceți în el calcule de orice fel. Toate calculele pentru actualizarea stării trebuie făcute în reducer, aici puteți scrie câtă logică este necesară pentru aceasta.

Deschideți aplicația voastră cu studenții și în fișierul studentsSlice.js adăugați încă un reducer voteClicked în câmpul reducers, așa cum se arată în lecție. Scrieți cod pentru el. Scopul reducerului dvs. - la clic să mărească valoarea vote (sau votului), pe care s-a dat clic, pentru studentul respectiv, cu 1.

La sfârșitul fișierului nu uitați să exportați creatorul de acțiuni obținut voteClicked.