Aggiornamento dei dati tramite parametri URL nello store in React Router

Nella lezione precedente abbiamo aggiunto un'altra route e una pagina con un modulo per modificare i dati. Ci resta da salvare i dati inseriti nel nostro modulo.

Per iniziare, aggiungiamo una funzione per aggiornare i dati del prodotto updateProduct in forStorage.js. Dobbiamo passarle l'id del prodotto e i dati modificati:

export async function updateProduct(id, updates) {
	await someNetwork();
}

Successivamente, dallo store con la chiave 'products' otterremo i prodotti e troveremo quello che stiamo modificando tramite il suo id. In caso di fallimento lancieremo un errore:

export async function updateProduct(id, updates) {
	await someNetwork();
	let products = await localforage.getItem('products');
	let product = products.find((product) => product.id === id);
	if (!product) throw new Error('No product found for this', id);				
}

Poi non ci resterà che applicare le modifiche al prodotto trovato e riscrivere l'elenco aggiornato nello store utilizzando la nostra funzione setProducts:

export async function updateProduct(id, updates) {
	await someNetwork();
	let products = await localforage.getItem('products');
	let product = products.find((product) => product.id === id);
	if (!product) throw new Error('No product found for this', id);
	Object.assign(product, updates);
	await setProducts(products);
	return product;
}

Prendi l'applicazione che hai creato nei compiti delle lezioni precedenti. Utilizzando i materiali della lezione, aggiungi al file forStorage.js la funzione updateStudent per aggiornare i dati dello studente nello store.