Redux rakendusele redutseeri lisamine

Eelmises õppetükis loome komponendi UserReaction selleks, et igal toodel oleks ka kasutajate reaktsioonid. Nüüd peame kirjutama redutseeri, mis töötleb reaktsioonide loendurit kui kasutaja klõpsab nupul selle või teise reaktsiooni jaoks.

Avame oma toodete rakenduse, ja selles faili productsSlice.js koos kõigi redutseeritega. Nüüd omaduses reducers loome veel ühe redutseeri reactionClicked (võime panna selle esimeseks - enne productAdded, kuigi sel pole vahet). Nagu tavaliselt, edastame sellele parameetriteks state ja action:

reactionClicked(state, action) {},

Nüüd aga lokkis sulgude sees, mille me jätsime eelmisel sammul tühjaks, kirjutame selle jaoks koodi. Esiteks eraldame toote id payload objektist action ja reaktsiooni nime:

const { productId, reaction } = action.payload

Seejärel saame antud staatist vajaliku toote:

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

Ja kui selline toode on olemas, siis suurendame antud reaktsiooni väärtust 1 võrra:

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

See on kõik, meie kood reactionClicked jaoks on valmis:

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

Faili lõpus eksportime saadud action creator'i:

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

Siin on vaja märkida kaht olulist punkti. Nagu mäletate eelmistest õppetundidest - uuendada niimoodi otse väärtust redutseeri koodis ei tohi (vaadake seda rida: reactions[reaction]++), kuid meil pääseb see õnneks peale, sest me teeme seda createSlice sees, mis kasutab Immer teeki. See hoolitseb selle eest, et meie kood muudetakse "ohutuks" väärtuse uuendamiseks. See võimaldab meil kirjutada keerulisi asju lihtsamal viisil.

Järgmine asi, mida tuleb meeles pidada - objekt action peaks sisaldama minimaalselt võimalikku infohulka - ainult selleks, et näidata, mis juhtus. Selles ei tasu teha mingeid arvutusi. Kõik arvutused staat uuendamiseks tuleks teha redutseeris, siin saab selle jaoks kirjutada nii palju loogikat, kui vaja.

Avage oma õpilaste rakendus ja failis studentsSlice.js lisage veel üks redutseer voteClicked väljale reducers, nagu näidatud tunnis. Kirjutage selle jaoks kood. Teie redutseeri ülesanne - klõpsamisel suurendada väärtust vote (või häält), millele klõpsati, antud õpilase jaoks, 1 võrra.

Faili lõpus ärge unustage eksportida saadud action creator'it voteClicked.