Productgegevens wijzigen in Redux store

We hebben geleerd hoe we producten kunnen toevoegen, maar wat als we de informatie over een product willen wijzigen? Laten we in deze en de volgende lessen bekijken hoe we dat kunnen doen.

Laten we onze productapplicatie openen en naar het bestand productsSlice.js gaan. Laten we beginnen met het schrijven van nog een reducer voor de slice products die wordt uitgevoerd wanneer een product wordt bijgewerkt. Laten we het productUpdated noemen en toevoegen aan het veld reducers na de reducer productAdded. Laten we ook onmiddellijk de parameters state en action doorgeven, waarop, zoals we ons herinneren, de reducer werkt:

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

Laten we nu nadenken over welke gegevens we nodig hebben om een product bij te werken. Allereerst is dat het id, daarmee kunnen we het betreffende product in de store vinden. De overige gegevens - naam, beschrijving, prijs en hoeveelheid zullen we hebben om te wijzigen. Al deze waarden krijgen we uit de eigenschap payload van het action-object, dat bij ons binnenkomt, en als we het met de hand zouden schrijven, zou het eruitzien zoals hieronder weergegeven. Merk op dat de verwachte waarde van de eigenschap payload één argument is, dus we zullen hier een object doorgeven (hierover zullen we later praten):

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

Nu we de belangrijkste punten hebben uitgezocht, kunnen we de code voor productUpdated tussen de accolades schrijven. Laten we eerst de gewijzigde gegevens uit het object action halen:

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

Nu vinden we het product dat moet worden gewijzigd op basis van het verkregen id:

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

Als zo'n product is gevonden in de store, vervangen we de gegevens ervan door nieuwe waarden:

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

Het enige dat ons rest is het exporteren van de action creator voor gebruik in de component, die vriendelijk voor ons wordt aangemaakt door createSlice. Laten we deze toevoegen aan de export aan het einde van het bestand, samen met de bestaande productAdded:

export const { productAdded, productUpdated } = productsSlice.actions

Open je studentenapplicatie. Na bestudering van de lesmaterialen, schrijf je in het bestand studentsSlice.js nog een reducer voor productsSlice, die de gegevens van een student in de store bijwerkt wanneer deze door de gebruiker worden gewijzigd. Noem deze studentUpdated.

Hoe zou je action-object er in dit geval uitzien? Stuur de code ervan in het antwoord.

Exporteer aan het einde van het bestand de verkregen action creator studentUpdated.