Kusasisha Data kulingana na Vigezo vya URL kwenye Kuhifadhi kwenye React Router

Katika somo lililopita tuliongeza njia nyingine na ukurasa wa fomu ya kuhariri data. Tumebakiwa na kuhifadhi data iliyoingizwa kwenye fomu yetu.

Kuanza, tuongeze kitendo cha kusasisha data ya bidhaa updateProduct kwenye forStorage.js. Tunahitaji kupitisha ndani yake id ya bidhaa na data iliyobadilishwa:

forStorage.jsexport async function updateProduct(id, updates) {
  await someNetwork();
}

Ifuatayo kutoka kwenye kuhifadhi kwa ufunguo 'products' tutapata bidhaa na tutapata ile tunayobadilisha kulingana na id yake. Kwa upande wa kushindwa tutatupa kosa:

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('Hakuna bidhaa iliyopatikana kwa hii', id);        
}

Kisha tunabakiwa na kuingiza mabadiliko kwenye bidhaa iliyopatikana na kuandika upya orodha iliyosasishwa kwenye kuhifadhi kwa kutumia kitendo chetu 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('Hakuna bidhaa iliyopatikana kwa hii', id);
  Object.assign(product, updates);
  await setProducts(products);
  return product;
}