Produkta datu maiņa Redux store

Mēs iemācījāmies pievienot produktus, bet ko ja mēs vēlēsimies mainīt informāciju par produktu? Apskatīsim, kā to izdarīt šajā un turpmākajās nodarbībās.

Atvērsim mūsu lietotni ar produktiem un dosimies uz failu productsSlice.js. Sāksim ar to, ka mums vajadzīgs produktu slīcenim products uzrakstīt vēl vienu reduceri, kas tiks palaists, kad produkts tiek atjaunināts. Nosauksim to par productUpdated un pievienosim laukā reducers aiz reducera productAdded. Arī nekavējoties padodam tam parametrus state un action, uz kuru pamata, kā mēs atceramies, strādā reducers:

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

Tagad padomāsim, kādi dati mums būs nepieciešami, lai atjauninātu produktu. Vispirms visu - tas ir id, pēc tā mēs varēsim atrast interesējošo produktu store. Pārējie dati - nosaukums, apraksts, cena un daudzums būs mūsu rīcībā izmaiņām. Visas šīs vērtības mēs iegūsim no īpašības payload objekta action, kas mums ieradīsies, un, ja mēs rakstītu to ar rokām, tas izskatītos tā, kā parādīts zemāk. Ievērojiet, ka gaidāmā vērtība īpašībai payload - viens arguments, tāpēc mēs padodam šeit objektu (par to mēs runāsim tālāk):

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

Noskaidrojot galvenos punktus, tagad mēs varam ierakstīt cirtainajās iekavās kodu priekš productUpdated. Vispirms iegūstam no objekta action mainītos datus:

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

Tagad mēs atradīsim pēc iegūtā id produktu, kas jāmaina:

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

Ja šāds produkts tika atrasts store, tad mēs aizstāsim tā datus ar jaunām vērtībām:

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 atliek tikai eksportēt action creator lietošanai komponentē, ko laipni mums izveidos createSlice. Pievienosim to eksportam faila beigās, līdzās esošajam productAdded:

export const { productAdded, productUpdated } = productsSlice.actions

Atveriet savu lietotni ar studentiem. Izpētījuši nodarbības materiālu, failā studentsSlice.js pierakstiet vēl vienu reduceri priekš productsSlice, kas atjauninās studenta datus store, ja tos maina lietotājs. Nosauciet to par studentUpdated.

Un kā šajā gadījumā izskatītos jūsu action objekts? Iesniedziet tā kodu atbildē.

Faila beigās eksportējiet iegūto action creator studentUpdated.