Zmena údajov produktu v Redux store

Naučili sme sa pridávať produkty, ale čo ak chceme zmeniť informácie o produkte? Poďme si v tejto a nasledujúcich lekciách pozrieť, ako to urobiť.

Otvorme našu aplikáciu s produktmi a prejdime do súboru productsSlice.js. Začnime tým, že pre slice products potrebujeme napísať ďalší reducer, ktorý sa spustí pri aktualizácii produktu. Pomenujeme ho productUpdated a pridáme do poľa reducers za reducer productAdded. Tiež mu hneď odovzdajme parametre state a action, na základe ktorých, ako si pamätáme, reducer funguje:

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

Teraz sa zamyslime, aké údaje budeme potrebovať na aktualizáciu produktu. Predovšetkým - to je id, podľa ktorého vieme nájsť produkt, ktorý nás zaujíma, v store. Ostatné údaje - názov, popis, cena a množstvo budú pre nás na zmenu. Všetky tieto hodnoty dostaneme z vlastnosti payload objektu action, ktorý k nám príde, a keby sme ho písali ručne, vyzeral by tak, ako je to znázornené nižšie. Všimnite si, že očakávaná hodnota vlastnosti payload je jeden argument, preto budeme odovzdávať sem objekt (o tom si povieme neskôr):

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

Po objasnení hlavných bodov teraz môžeme napísať do zložených zátvoriek kód pre productUpdated. Najprv získame z objektu action zmenené údaje:

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

Teraz nájdeme podľa získaného id produkt, ktorý je potrebné zmeniť:

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

Ak sa takýto produkt našiel v store, tak jeho údaje nahradíme novými hodnotami:

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
	}
},

Zostáva nám už len exportovať action creator na použitie v komponente, ktorý za nás láskavo vytvorí createSlice. Pridajme ho na konci súboru k exportu, spolu s existujúcim productAdded:

export const { productAdded, productUpdated } = productsSlice.actions

Otvorte svoju aplikáciu so študentmi. Po preštudovaní materiálu lekcie v súbore studentsSlice.js doplňte ďalší reducer pre productsSlice, ktorý bude aktualizovať údaje študenta v store v prípade ich zmeny používateľom. Pomenujte ho studentUpdated.

A ako by v tomto prípade vyzeral váš objekt action? Pošlite jeho kód v odpovedi.

Na konci súboru exportujte získaný action creator studentUpdated.