Izmena podataka proizvoda u Redux store-u

Naučili smo kako da dodajemo proizvode, ali šta ako želimo da promenimo informacije o proizvodu? Hajde da razmotrimo kako to da uradimo u ovoj i narednim lekcijama.

Otvorimo našu aplikaciju sa proizvodima i idemo u fajl productsSlice.js. Počećemo od toga da nam je za slice products potrebno napisati još jedan reducer, koji će se pokrenuti pri ažuriranju proizvoda. Nazvaćemo ga productUpdated i dodati u polje reducers posle reducer-a productAdded. Takođe prosledićemo mu odmah parametre state i action, na osnovu kojih, kao što se sećamo, radi reducer:

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

Sada hajde da razmislimo, koji podaci će nam biti potrebni za ažuriranje proizvoda. Pre svega - to je id, po njemu ćemo moći da nađemo proizvod koji nas zanima u store-u. Ostali podaci - naziv, opis, cena i količina biće nam za promenu. Sve ove vrednosti dobićemo iz svojstva payload objekta action, koji će nam stići, i, ako bismo ga pisali ručno, onda bi izgledao kao što je prikazano ispod. Obratite pažnju da je očekivana vrednost svojstva payload - jedan argument, zato ćemo proslediti ovde objekat (o tome ćemo govoriti ubuduće):

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

Nakon što smo razjasnili osnovne tačke, sada možemo napisati u vitičastim zagradama kod za productUpdated. Prvo ćemo dobiti iz objekta action izmenjene podatke:

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

Sada ćemo pronaći po dobijenom id proizvod, koji treba izmeniti:

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

Ako je takav proizvod pronađen u store-u, onda ćemo zameniti njegove podatke novim vrednostima:

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

Ostaje nam samo da eksportujemo action creator za korišćenje u komponenti, što će za nas ljubazno kreirati createSlice. Hajde da ga dodamo u eksport na kraju fajla, uz postojeći productAdded:

export const { productAdded, productUpdated } = productsSlice.actions

Otvorite vašu aplikaciju sa studentima. Nakon što proučite materijal lekcije, u fajlu studentsSlice.js dopišite još jedan reducer za productsSlice, koji će ažurirati podatke studenta u store-u u slučaju da ih korisnik promeni. Nazovite ga studentUpdated.

A kako bi u ovom slučaju izgledao vaš objekat action? Pošaljite njegov kod u odgovoru.

Na kraju fajla eksportujte dobijeni action creator studentUpdated.