Produkto duomenų keitimas Redux store

Išmokome pridėti produktus, o kas jei norėtume pakeisti informaciją apie produktą? Pažiūrėkime, kaip tai padaryti šioje ir keliose sekančiose pamokose.

Atidarykime mūsų produktų aplikaciją ir eikime į failą productsSlice.js. Pradėsime nuo to, kad mums reikia products slice'ui parašyti dar vieną reducerį, kuris bus paleidžiamas atnaujinant produktą. Pavadinkime jį productUpdated ir pridėkime į lauką reducers po reducerio productAdded. Taip pat perduokime jam iškart parametrais state ir action, remiantis kuriais, kaip prisimename, veikia reduceris:

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

Dabar pagalvokime, kokie duomenys mums reikės produkto atnaujinimui. Pirmiausia - tai id, pagal jį galėsime rasti mums įdomų produktą store. Kiti duomenys - pavadinimas, aprašymas, kaina ir kiekis bus mums pakeitimui. Visas šias reikšmes gausime iš savybės payload objekto action, kuris mums ateis, ir, jei rašytume jį rankomis, tai jis atrodytų taip, kaip parodyta žemiau. Atkreipkite dėmesį, kad tikėtina reikšmė savybės payload - vienas argumentas, todėl mes perduosime čia objektą (apie tai pakalbėsime vėliau):

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

Išsiaiškinę pagrindinius momentus, dabar galime parašyti riestiniuose skliaustuose kodą productUpdated. Pirmiausia gausime iš objekto action pakeistus duomenis:

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

Dabar rasime pagal gautą id produktą, kurį reikia pakeisti:

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

Jei toks produktas buvo rastas store, tai mes pakeisime jo duomenis naujomis reikšmėmis:

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

Mums belieka tik eksportuoti action creator'į naudojimui komponente, kurį maloniai sukurs už mus createSlice. Pridėkime jį prie eksporto failo pabaigoje, kartu su esamu productAdded:

export const { productAdded, productUpdated } = productsSlice.actions

Atidarykite savo studentų aplikaciją. Išstudijavę pamokos medžiagą, faile studentsSlice.js parašykite dar vieną reducerį productsSlice, kuris atnaujins studento duomenis store jei juos pakeis vartotojas. Pavadinkite jį studentUpdated.

O kaip tokiu atveju atrodytų jūsų action objektas? Atsiųskite jo kodą atsakyme.

Failo pabaigoje eksportuokite gautą action creator'į studentUpdated.