Ndryshimi i të dhënave të produktit në Redux store

Ne kemi mësuar të shtojmë produkte, por çfarë nëse dëshirojmë të ndryshojmë informacionin rreth produktit? Le të shqyrtojmë se si ta bëjmë këtë në këtë dhe në mësimet në vijim.

Le të hapim aplikacionin tonë të produkteve dhe të shkojmë në skedarin productsSlice.js. Le të fillojmë me faktin se për slice-in products na duhet të shkruajmë një reducer tjetër, i cili do të aktivizohet kur një produkt përditësohet. Le ta quajmë atë productUpdated dhe ta shtojmë në fushën reducers pas reducer-it productAdded. Gjithashtu le t'i kalojmë menjëherë si parametra state dhe action, mbi të cilat, siç e kujtojmë, funksionon redukeri:

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

Tani le të mendojmë se cilat të dhëna na duhen për të përditësuar produktin. Para së gjithash - ky është id, me të cilin do të mund të gjejmë produktin që na intereson në store. Të dhënat e tjera - emri, përshkrimi, çmimi dhe sasia do të jenë tek ne për tu ndryshuar. Të gjitha këto vlera do t'i marrim nga vetia payload e objektit action, që do të na vijë, dhe, nëse do ta shkruanim atë me dorë, atëherë ai do të dukej siç tregohet më poshtë. Vini re se vlera e pritur e vetisë payload është një argument, prandaj ne do të kalojmë këtu një objekt (për këtë do të flasim më vonë):

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

Pasi sqaruam pikat kryesore, tani mund të shkruajmë në kllapat kaçurrelë kodin për productUpdated. Së pari le të marrim nga objekti action të dhënat e ndryshuara:

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

Tani do të gjejmë produktin që duhet ndryshuar sipas id të marrë:

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

Nëse një produkt i tillë gjendet në store, atëherë ne do t'i zëvendësojmë të dhënat e tij me vlerat e reja:

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

Na mbetet vetëm të eksportojmë action creator-in për përdorim në komponent, që createSlice do ta krijojë me mirësi për ne. Le ta shtojmë atë në eksport në fund të skedarit, bashkë me productAdded ekzistues:

export const { productAdded, productUpdated } = productsSlice.actions

Hapni aplikacionin tuaj me studentët. Pasi keni studiuar materialin e mësimit, në skedarin studentsSlice.js shkruani një reducer tjetër për productsSlice, i cili do të përditësojë të dhënat e studentit në store në rast se ato ndryshohen nga përdoruesi. Quajeni studentUpdated.

Si do të dukej në këtë rast objekti juaj action? Dërgoni kodin e tij në përgjigje.

Në fund të skedarit eksportoni action creator-in e përftuar studentUpdated.