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:

forStorage.jsexport 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:

forStorage.jsexport 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:

forStorage.jsexport 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;
}