Termék adatainak módosítása a Redux store-ban

Megtanultuk, hogyan kell termékeket hozzáadni, de mi van, ha módosítani szeretnénk a termék információit? Nézzük meg, hogyan tehetjük ezt meg ebben és a következő leckékben.

Nyissuk meg a termék alkalmazásunkat és menjünk a productsSlice.js fájlba. Kezdjük azzal, hogy a products slice-hoz írunk még egy reducer-t, amely akkor fut le, amikor egy terméket frissítünk. Nevezzük el productUpdated-nak és adjuk hozzá a reducers mezőhöz a productAdded reducer után. Átadunk neki paraméterként a state és action értékeket, amelyek alapján, ahogy emlékszünk, a reducer működik:

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

Most gondolkozzunk el azon, hogy milyen adatokra lesz szükségünk a termék frissítéséhez. Először is - ez a id, ezzel megtalálhatjuk a számunkra érdekes terméket a store-ban. A többi adat - név, leírás, ár és mennyiség lesz a módosítandó értékeink. Mindezeket az értékeket az action objektum payload tulajdonságából kapjuk meg, amely hozzánk ér, és ha mi írnánk a kezünkkel, akkor úgy nézne ki, ahogyan az alább látható. Vegye figyelembe, hogy a várt érték a payload tulajdonságnak - egy argumentum, ezért egy objektumot fogunk ide átadni (erről később beszélünk):

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

Miután tisztáztuk a főbb pontokat, most már írhatunk kódot a productUpdated kapcsos zárójelei közé. Először kapjuk meg a action objektumból a módosított adatokat:

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

Most megkeressük a kapott id alapján a terméket, amelyet módosítani kell:

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

Ha találtunk ilyen terméket a store-ban, akkor lecseréljük az adatait az új értékekre:

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

Már csak exportálnunk kell az action creator-t a komponensekben való használathoz, amit a createSlice készít el nekünk. Adjuk hozzá az exporthoz a fájl végén, a meglévő productAdded mellett:

export const { productAdded, productUpdated } = productsSlice.actions

Nyissa meg a diák alkalmazását. Miután tanulmányozta a lecke anyagát, a studentsSlice.js fájlban írjon még egy reducer-t a productsSlice-hoz, amely frissíti a diák adatait a store-ban, ha a felhasználó módosítja azokat. Nevezze el studentUpdated-nak.

Hogyan nézne ki ebben az esetben az Ön action objektuma? Küldje el a kódját a válaszban.

A fájl végén exportálja a kapott action creator-t, a studentUpdated-t.