React Routerにおけるストレージ内データのURLパラメータによる更新

前のレッスンでは、もう1つのルートとデータ編集用のフォームを持つページを追加しました。 あとは、フォームに入力したデータを保存するだけです。

まず、製品データを更新する関数 updateProduct を forStorage.js に追加しましょう。 これに製品の id と変更されたデータを渡す必要があります：

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

次に、キー 'products' からストレージから製品を取得し、 その id で変更対象の製品を見つけます。 失敗した場合はエラーをスローします：

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('このIDに対応する製品が見つかりません', id);        
}

その後、見つかった製品に変更を加え、 更新されたリストを関数 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('このIDに対応する製品が見つかりません', id);
  Object.assign(product, updates);
  await setProducts(products);
  return product;
}