Reducer ja action Reduxissa

Edellisellä oppitunnilla saimme valmiiksi lomakkeen tuotteen lisäämiseksi ja näytimme sen etusivulla. Mutta toistaiseksi lisätyt tiedot eivät tallennu, toisin sanoen uusi tuote ei lisäänny olemassa oleviin storeen. Korjataan tämä.

Aluksi tuotesovelluksessamme avaamme tiedoston productsSlice.jsx ja kirjoitamme ominaisuuteen reducer kohteelle createSlice funktion productAdded, joka vastaa tuotteen lisäämisestä storeen perustuen sille annettuun nykyiseen tilaan ja actioniin. On tärkeää huomata, että tänne ei välitetä koko stateta, vaan vain se osa siitä, joka vastaa tuotteista (slice products tuntee vain sen). Uusi tuoteolio löytyy ominaisuudesta payload oliosta action, joka luodaan käsittelijässä tallennuspainiketta painettaessa lomakkeessa. Tuloksena reducer productAdded näyttää koodissa createSlice tältä:

const productsSlice = createSlice({
	name: 'products',
	initialState,
	reducers: {
		productAdded(state, action) {
			state.push(action.payload)
		},
	},
})

Entä action? Oppaan alussa mainitsimme, että action on tietty tapahtuma, esitettynä objektina, joka kuvailee sovelluksessa tapahtunutta. Puhuimme myös siitä, että voimme käyttää action creator -funktiota, joka luo meille tällaisen objektin, esimerkiksi näin:

const addProduct = newProduct => {
	return {
		type: 'products/productAdded',
		payload: newProduct
	}
}

Hyvä uutinen on, että meidän ei tarvitse tehdä mitään, vaan tämän tekee puolestamme funktio createSlice, jota käytämme. Heti kun olemme kirjoittaneet reducerin, se luo automaattisesti meille action creatorin samalla nimellä. Meidän tarvitsee vain viedä saatu action creator myöhempää käyttöä varten komponenteissa. Tehdään tämä tiedoston lopussa ennen reducerin viemistä, näin:

export const { productAdded } = productsSlice.actions
export default productsSlice.reducer

Avaa opiskelijasovelluksesi, ja sen jälkeen tiedosto studentsSlice.jsx, lisää kentän reducer arvo kohteelle createSlice, kuten oppitunnilla näytetään.

Lisää tiedoston studentsSlice.jsx loppuun saatujen action creator -funktioiden vienti.