Reducerin lisääminen Redux-sovellukseen

Edellisessä oppitunnissa loimme komponentin UserReaction, jotta jokaisella tuotteella olisi myös käyttäjien reaktiot. Nyt meidän on kirjoitettava reducer, joka käsittelee reaktiolaskuria kun käyttäjä napsauttaa mitä tahansa reaktionappia.

Avataanpa tuotesovelluksemme, ja siellä tiedosto productsSlice.js, joka sisältää kaikki reducerit. Nyt luomme reducers-ominaisuuteen vielä yhden reducerin reactionClicked (voimme laittaa sen ensimmäiseksi - ennen productAdded:ia, vaikkei sillä ole väliä). Kuten yleensä, välitämme sille parametreina state ja action:

reactionClicked(state, action) {},

Ja nyt aaltosulkeiden sisään, jotka jätimme tyhjiksi edellisessä vaiheessa, kirjoitamme sille koodin. Ensinnäkin puremme tuotteen id:n payload-objektista action ja reaktion nimen:

const { productId, reaction } = action.payload

Sitten saadusta tilasta haetaan tarvittava tuote:

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

Ja jos tällainen tuote on olemassa, kasvatetaan annetun reaktion arvoa 1:llä:

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

Siinä kaikki, koodimme reactionClicked:lle on valmis:

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

Lisätään tiedoston loppuun saadun action creatorin vienti:

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

Tässä on huomioitava kaksi tärkeää seikkaa. Kuten muistat aiemmista oppitunneista - arvoa on kiellettyä päivittää suoraan näin reducerin koodissa (katso tätä riviä: reactions[reaction]++), mutta meillä se menee läpi, koska teemme sen createSlice:n sisällä, joka käyttää Immer-kirjastoa. Se huolehtii siitä, että koodimme muunnetaan "turvalliseksi" arvon päivitykseksi. Tämä antaa meille mahdollisuuden kirjoittaa monimutkaisia asioita yksinkertaisemmin.

Seuraava asia, joka on muistettava - action-objektin tulee sisältää mahdollisimman vähän tietoa - vain sen verran, että voidaan osoittaa, mitä tapahtui. Siinä ei pidä tehdä mitään laskelmia. Kaikki tilan päivittämiseen tarvittavat laskelmat on tehtävä reducerissa, tähän voidaan kirjoittaa niin paljon logiikkaa kuin tarvitaan.

Avaa opiskelijasovelluksesi ja lisää tiedostoon studentsSlice.js vielä yksi reduceri voteClicked reducers-kenttään, kuten oppitunnissa näytetään. Kirjoita sille koodi. Reducerisi tehtävänä on napsautuksen yhteydessä kasvattaa kyseisen opiskelijan napsautetun vote:n (tai äänen) arvoa 1:llä.

Älä unohda viedä saatua voteClicked action creatoria tiedoston lopussa.