Ændring af produktdata i Redux store

Vi har lært at tilføje produkter, men hvad hvis vi ønsker at ændre informationen om et produkt? Lad os se på, hvordan vi gør det i denne og de efterfølgende lektioner.

Lad os åbne vores produktapplikation og gå til filen productsSlice.js. Vi starter med, at vi for products slicen skal skrive en endnu en reducer, som vil blive udløst ved opdatering af et produkt. Lad os kalde den productUpdated og tilføje den i feltet reducers efter productAdded reduceren. Vi overfører også straks parametrene state og action til den, som vi husker, reduceren arbejder på basis af:

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

Lad os nu tænke over, hvilke data vi har brug for for at opdatere produktet. Først og fremmest - dette er id, ved hjælp af det kan vi finde det ønskede produkt i storet. De resterende data - navn, beskrivelse, pris og antal vil vi have til ændring. Alle disse værdier vil vi få fra egenskaben payload i action-objektet, som vil komme til os, og hvis vi skrev det manuelt, ville det se ud som vist nedenfor. Bemærk, at den forventede værdi af egenskaben payload er et argument, så vi vil sende et objekt hertil (dette vil vi tale om senere):

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

Efter at have afklaret hovedpunkterne kan vi nu skrive koden for productUpdated i tuborgparenteserne. Først henter vi de ændrede data fra action-objektet:

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

Nu finder vi produktet, der skal ændres, ved hjælp af den modtagne id:

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

Hvis sådan et produkt blev fundet i storet, erstatter vi dets data med nye værdier:

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

Tilbage står kun at eksportere action creatoren for brug i komponentet, som createSlice venligst vil oprette for os. Lad os tilføje den til eksporten i slutningen af filen, sammen med den eksisterende productAdded:

export const { productAdded, productUpdated } = productsSlice.actions

Åbn din applikation med studerende. Efter at have studeret lektionens materiale, skal du i filen studentsSlice.js skrive en reducer mere for productsSlice, som vil opdatere en studerendes data i storet, hvis de ændres af brugeren. Kald den studentUpdated.

Og hvordan ville dit action-objekt se ud i dette tilfælde? Send dens kode i svaret.

Eksporter den resulterende action creator studentUpdated i slutningen af filen.