Spreminjanje podatkov o izdelku v Redux shrambi

Naučili smo se dodajati izdelke, kaj pa če želimo spremeniti informacije o izdelku? Oglejmo si, kako to narediti v tej in naslednjih lekcijah.

Odprimo našo aplikacijo z izdelki in pojdimo v datoteko productsSlice.js. Začnimo s tem, da moramo za slice products napisati še en reducer, ki se bo sprožil pri posodobitvi izdelka. Poimenujmo ga productUpdated in ga dodajmo v polje reducers za reducerjem productAdded. Prav tako mu nemudoma podajmo parametra state in action, na podlagi katerih, kot se spomnimo, deluje reducer:

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

Zdaj pa pomislimo, kateri podatki bodo potrebni za posodobitev izdelka. Predvsem - to je id, po njem bomo lahko našli zanimivi izdelek v shrambi. Preostali podatki - naziv, opis, cena in količina so na voljo za spreminjanje. Vse te vrednosti bomo dobili iz lastnosti payload objekta action, ki bo prišel do nas, in če bi ga pisali ročno, bi bil videti tako, kot je prikazano spodaj. Upoštevajte, da je pričakovana vrednost lastnosti payload - en argument, zato bomo sem podali objekt (o tem bomo govorili v nadaljevanju):

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

Ko smo razjasnili glavne točke, lahko zdaj napišemo kodo za productUpdated v zavitih oklepajih. Najprej pridobimo iz objekta action spremenjene podatke:

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

Zdaj bomo po pridobljenem id našli izdelek, ki ga je treba spremeniti:

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

Če je bil tak izdelek najden v shrambi, potem bomo njegove podatke zamenjali z novimi vrednostmi:

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

Preostane nam le še izvoz action creatorja za uporabo v komponenti, ki ga bo prijazno ustvaril za nas createSlice. Dodajmo ga k izvozu na koncu datoteke, skupaj z obstoječim productAdded:

export const { productAdded, productUpdated } = productsSlice.actions

Odprite vašo aplikacijo s študenti. Po preučitvi gradiva lekcije, v datoteki studentsSlice.js dopolnite še en reducer za productsSlice, ki bo posodabljal podatke študenta v shrambi v primeru, da jih uporabnik spremeni. Poimenujte ga studentUpdated.

Kako bi bil v tem primeru videti vaš objekt action? Pošljite njegovo kodo v odgovoru.

Na koncu datoteke izvozite pridobljeni action creator studentUpdated.