Tooteandmete muutmine Redux store'is

Me õppisime tooteid lisama, aga mis siis, kui me soovime toote infot muuta? Vaatame selles ja järgnevates tundides, kuidas seda teha.

Avame oma tooterakenduse ja läheme faili productsSlice.js. Alustame sellest, et meil on vaja products lõigule kirjutada veel üks reducer, mis käivitub toote uuendamisel. Nimetame selle productUpdated ja lisame väljale reducers pärast reducerit productAdded. Samuti edastame sellele kohe parameetritena state ja action, mille põhjal, nagu me mäletame, reducer töötab:

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

Nüüd mõtleme, milliseid andmeid meil vaja on toote uuendamiseks. Enne kõike - see on id, selle abil saame leida meid huvitava toote store'ist. Ülejäänud andmed - nimi, kirjeldus, hind ja kogus on meil muutmiseks. Kõik need väärtused saame omadusest payload action objektil, mis meile tuleb, ja kui me kirjutaksime seda käsitsi, siis see näeks välja nagu allpool näidatud. Pange tähele, et oodatav väärtus omadusel payload - üks argument, seega me edastame siia objekti (sellest räägime edaspidi):

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

Põhipunktid selgitatud, nüüd saame kirjutada lokkis sulgudes koodi productUpdated jaoks. Kõigepealt saame objektist action muudetud andmed:

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

Nüüd leiame saadud id põhjal toote, mida on vaja muuta:

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

Kui selline toode leiti store'ist, siis me asendame selle andmed uute väärtustega:

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

Meil jääb üle vaid eksportida action creator kasutamiseks komponendis, mille meile loob lahkelt createSlice. Lisame selle ekspordi faili lõppu, koos olemasoleva productAdded kõrval:

export const { productAdded, productUpdated } = productsSlice.actions

Avage oma üliõpilaste rakendus. Õppematerjali läbi uurides, failis studentsSlice.js kirjutage veel üks reducer productsSlice jaoks, mis uuendab üliõpilase andmeid store'is juhul, kui kasutaja need muudab. Nimetage see studentUpdated.

A kuidas näeks sel juhul teie action objekt välja? Saatke selle kood vastusena.

Faili lõpus eksportige saadud action creator studentUpdated.