Endring av produktdata i Redux store

Vi har lært å legge til produkter, men hva hvis vi ønsker å endre informasjonen om et produkt? La oss se på hvordan dette gjøres i denne og de påfølgende leksjonene.

La oss åpne produktapplikasjonen vår og gå inn i filen productsSlice.js. Vi begynner med at vi for products-slicet trenger å skrive en ny reducer, som vil kjøre når et produkt oppdateres. La oss kalle den productUpdated og legge den til i feltet reducers etter productAdded-reduceren. La oss også umiddelbart sende den parameterne state og action, som vi husker at reduceren arbeider på grunnlag av:

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

La oss nå tenke på hvilke data vi trenger for å oppdatere et produkt. Først og fremst - id, ved hjelp av den kan vi finne produktet vi er interessert i i storet. De andre dataene - navn, beskrivelse, pris og antall vil vi ha for endring. Alle disse verdiene vil vi få fra egenskapen payload i action-objektet, som vil komme til oss, og hvis vi skrev det for hånd, ville det sett ut som vist nedenfor. Legg merke til at forventet verdi for egenskapen payload er ett argument, så vi vil sende et objekt hit (dette vil vi snakke mer om senere):

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

Etter å ha avklart hovedpunktene, kan vi nå skrive koden for productUpdated i krøllparentesene. Først henter vi de endrede dataene fra action-objektet:

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

Nå finner vi produktet som skal endres ved hjelp av den mottatte id-en:

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

Hvis et slikt produkt ble funnet i storet, erstatter vi dataene med de nye verdiene:

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

Det eneste som gjenstår for oss er å eksportere action creator for bruk i komponenten, som createSlice vil venligst opprette for oss. La oss legge den til eksporten på slutten av filen, sammen med den eksisterende productAdded:

export const { productAdded, productUpdated } = productsSlice.actions

Åpne studentapplikasjonen din. Etter å ha studert leksjonsmaterialet, i filen studentsSlice.js skriv videre på en ny reducer for productsSlice, som vil oppdatere studentdata i storet i tilfelle de endres av brukeren. Kall den studentUpdated.

Hvordan ville action-objektet ditt sett ut i dette tilfellet? Send koden i svaret.

Eksporter den resulterende action creatoren studentUpdated på slutten av filen.