Změna dat produktu v Redux store

Naučili jsme se přidávat produkty, ale co když budeme chtít změnit informace o produktu? Podívejme se, jak to udělat v této a následujících lekcích.

Otevřeme naši aplikaci s produkty a přejděme do souboru productsSlice.js. Začněme tím, že pro slice products potřebujeme napsat další reducer, který se spustí při aktualizaci produktu. Pojmenujeme jej productUpdated a přidáme do pole reducers za reducer productAdded. Také mu předáme jako parametry state a action, na jejichž základě, jak si pamatujeme, reducer funguje:

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

Nyní se zamysleme, jaká data budeme potřebovat pro aktualizaci produktu. Především - to je id, podle něj budeme moci najít požadovaný produkt v store. Zbývající data - název, popis, cena a množství budou určena ke změně. Všechny tyto hodnoty získáme z vlastnosti payload objektu action, který k nám přijde, a pokud bychom jej psali ručně, vypadal by tak, jak je znázorněno níže. Všimněte si, že očekávaná hodnota vlastnosti payload - jeden argument, proto budeme sem předávat objekt (o tom si povíme dále):

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

Poté, co jsme objasnili hlavní body, nyní můžeme napsat do složených závorek kód pro productUpdated. Nejprve získáme z objektu action změněná data:

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

Nyní najdeme podle získaného id produkt, který je třeba změnit:

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

Pokud byl takový produkt v store nalezen, nahradíme jeho data 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
	}
},

Zbývá nám pouze exportovat action creator pro použití v komponentě, který za nás laskavě vytvoří createSlice. Přidejme jej k exportu na konci souboru, spolu se stávajícím productAdded:

export const { productAdded, productUpdated } = productsSlice.actions

Otevřete vaši aplikaci se studenty. Po prostudování materiálu lekce v souboru studentsSlice.js doplňte další reducer pro productsSlice, který bude aktualizovat data studenta v store v případě jejich změny uživatelem. Pojmenujte jej studentUpdated.

A jak by v tomto případě vypadal váš objekt action? Pošlete jeho kód v odpovědi.

Na konci souboru exportujte získaný action creator studentUpdated.