Modifica dei dati del prodotto in Redux store

Abbiamo imparato ad aggiungere prodotti, ma cosa succede se vogliamo modificare le informazioni di un prodotto? Esaminiamo come fare in questa e nelle prossime lezioni.

Apriamo la nostra applicazione di prodotti e andiamo al file productsSlice.js. Iniziamo con il fatto che per lo slice products dobbiamo scrivere un altro reducer, che verrà attivato quando un prodotto viene aggiornato. Chiamiamolo productUpdated e aggiungiamolo al campo reducers dopo il reducer productAdded. Inoltre passiamogli subito come parametri state e action, sulla base dei quali, come ricordiamo, opera il reducer:

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

Ora pensiamo a quali dati ci serviranno per aggiornare il prodotto. Prima di tutto - l'id, con esso potremo trovare il prodotto che ci interessa nello store. Gli altri dati - nome, descrizione, prezzo e quantità saranno a nostra disposizione per la modifica. Tutti questi valori li otterremo dalla proprietà payload dell'oggetto action, che ci arriverà, e, se lo scrivessimo manualmente, apparirebbe come mostrato sotto. Notate che il valore atteso della proprietà payload è un singolo argomento, quindi passeremo qui un oggetto (di questo parleremo in seguito):

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

Chiariti i punti principali, ora possiamo scrivere tra le parentesi graffe il codice per productUpdated. Prima otteniamo dall' oggetto action i dati modificati:

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

Ora troveremo, tramite l'id ottenuto, il prodotto che deve essere modificato:

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

Se tale prodotto viene trovato nello store, sostituiremo i suoi dati con i nuovi valori:

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

Ci resta solo da esportare l'action creator per l'uso nel componente, che createSlice creerà gentilmente per noi. Aggiungiamolo all'esportazione alla fine del file, assieme a productAdded esistente:

export const { productAdded, productUpdated } = productsSlice.actions

Aprite la vostra applicazione con gli studenti. Dopo aver studiato il materiale della lezione, nel file studentsSlice.js scrivete un altro reducer per productsSlice, che aggiornerà i dati dello studente nello store in caso di modifica da parte dell'utente. Chiamatelo studentUpdated.

E come apparirebbe in questo caso il vostro oggetto action? Inviate il suo codice nella risposta.

Alla fine del file esportate l'action creator ottenuto studentUpdated.