Verandering van produkdata in Redux store

Ons het geleer om produkte by te voeg, maar wat as ons die inligting oor 'n produk wil verander? Laat ons kyk hoe om dit te doen in hierdie en die volgende lesse.

Laat ons ons produktoepassing oopmaak en na die lêer productsSlice.js gaan. Ons begin deurdat ons vir die products slice 'n ander reducer moet skryf, wat sal afgevuur word wanneer 'n produk opdateer word. Noem dit productUpdated en voeg dit by die reducers veld na die productAdded reducer. Stel ook onmiddellik die parameters state en action daarvoor, waarop, soos ons onthou, die reducer werk:

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

Laat ons nou dink oor watter data ons benodig om 'n produk op te dateer. In die eerste plek - dit is id, daarmee sal ons kan vind die produk waarin ons belangstel in die store. Die res van die data - naam, beskrywing, prys en hoeveelheid sal ons hê om te verander. Al hierdie waardes sal ons kry uit die payload eienskap van die action object, wat na ons sal kom, en as ons dit met die hand geskryf het, sou dit gelyk het soos hieronder getoon. Let op dat die verwagte waarde van die payload eienskap - een argument is, daarom sal ons 'n object hieroor stuur (hieroor sal ons praat in die toekoms):

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

Nadat ons die hoofpunte uitgesorteer het, kan ons nou die kode vir productUpdated in die krulhakies skryf. Eers kry ons die veranderde data uit die action object:

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

Nou vind ons die produk wat opgedateer moet word, volgens die verkry id:

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

As so 'n produk in die store gevind is, dan vervang ons sy data met die nuwe waardes:

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

Wat oorbly is om die action creator te eksporteer vir gebruik in die komponent, wat createSlice vriendelik vir ons sal skep. Laat ons dit by die eksport aan die einde van die lêer voeg, saam met die bestaande productAdded:

export const { productAdded, productUpdated } = productsSlice.actions

Maak jou studentetoepassing oop. Nadat jy die lesmateriaal bestudeer het, skryf 'n ander reducer by in die lêer studentsSlice.js vir productsSlice, wat die data van 'n student in die store sal opdateer in die geval dat dit deur die gebruiker verander word. Noem dit studentUpdated.

En hoe sou jou action object in hierdie geval lyk? Stuur sy kode in die antwoord.

Eksporteer die verkrygde action creator studentUpdated aan die einde van die lêer.