Tuotetietojen muuttaminen Redux storessa

Olemme oppineet lisäämään tuotteita, mutta entä jos haluamme muuttaa tuotteen tietoja? Tutustumme tässä ja seuraavissa oppitunneissa kuinka se tehdään.

Avataan tuotesovelluksemme ja mennään tiedostoon productsSlice.js. Aloitamme siitä, että meidän on kirjoitettava sliceen products vielä yksi reducer, joka käynnistyy tuotetta päivittäessä. Nimetään se productUpdated ja lisätään kenttään reducers reducerin productAdded jälkeen. Myös annetaan sille välittömästi parametrit state ja action, joiden perusteella, kuten muistamme, reducer toimii:

reducers: {
	productAdded(state, action) {
		state.push(action.payload)
	},
	productUpdated(state, action) {},
},

Mietitään nyt, mitä tietoja tarvitsemme tuotteen päivittämiseen. Ennen kaikkea - se on id, sen avulla voimme löytää kiinnostavan tuotteen storessa. Loput tiedot - nimi, kuvaus, hinta ja määrä tulevat olemaan muutettavina. Kaikki nämä arvot saamme action-olion payload-ominaisuudesta, joka tulee meille, ja jos kirjoittaisimme sen käsin, se näyttäisi alla olevalta. Huomaa, että odotettu arvo payload-ominaisuudelle - yksi argumentti, joten me annamme tähän objektin (puhumme tästä myöhemmin):

{
	type: 'products/productUpdated',
	payload: {id, name, desc, price, amount}
}

Selvittyämme pääkohdista, voimme nyt kirjoittaa aaltosulkeisiin koodin productUpdated:lle. Ensin saamme action-objektista muutetut tiedot:

productUpdated(state, action) {
	const { id, name, desc, price, amount } = action.payload
},

Nyt löydämme saadun id:n perusteella tuotteen, jota on muutettava:

productUpdated(state, action) {
	const { id, name, desc, price, amount } = action.payload
	const desiredProduct = state.find(product => product.id === id)
},

Jos tällainen tuote löytyi storessa, niin korvaamme sen tiedot uusilla arvoilla:

productUpdated(state, action) {
	const { id, name, desc, price, amount } = action.payload
	const desiredProduct = state.find(product => product.id === id)
	if (desiredProduct) {
		desiredProduct.name = name
		desiredProduct.desc = desc
		desiredProduct.price = price
		desiredProduct.amount = amount
	}
},

Meidän on vielä eksportattava action creator käytettäväksi komponentissa, joka createSlice luo meille armollisesti. Lisätään se exportiin tiedoston loppuun, nykyisen productAdded:n rinnalle:

export const { productAdded, productUpdated } = productsSlice.actions

Avaa opiskelijasovelluksesi. Oppitunnin materiaalia tutkittuasi, tiedostossa studentsSlice.js kirjoita vielä yksi reducer productsSlice:lle, joka päivittää opiskelijan tiedot storessa, jos käyttäjä muuttaa niitä. Nimeä se studentUpdated.

Miltä action-objektisi näyttäisi tässä tapauksessa? Lähetä sen koodi vastauksessa.

Tiedoston lopussa eksporttaa saamasi action creator studentUpdated.