React Routerでのストアへのデータ追加

このレッスンでは、ストアへの商品追加を行います。 まずは、商品を作成するための関数 createProduct が必要です。 forStorage.js ファイルの getProducts 関数の後に追加しましょう:

forStorage.jsexport async function createProduct() {}

まずは再び someNetwork を追加します:

forStorage.jsexport async function createProduct() {
  await someNetwork();
}

次に、各商品に 一意のid が必要です。Reactチュートリアルでも扱いましたね。 このために nanoid ライブラリを使用します。 ターミナルで次のコマンドを実行してください:

terminalnpm install --save nanoid

forStorage.js にライブラリをインポートします:

forStorage.jsimport { nanoid } from 'nanoid'

id は 6 文字にしましょう:

forStorage.jsexport async function createProduct() {
  await someNetwork();
  let id = nanoid(6);
}

商品作成時、最初はオブジェクトに id しかありません。 getProducts を呼び出し、生成した商品を追加して、 ストア内の商品リストを更新します。完成です:

forStorage.jsexport async function createProduct() {
  await someNetwork();
  let id = nanoid(6);
  let product = { id };
  let products = await getProducts();
  products.unshift(product);
  await setProducts(products);
  return product;
}

ストア内のリストを更新する関数は次のようになります （キー products の下に商品を保存します）。 この関数を createProduct 関数の後に配置します:

forStorage.jsfunction setProducts(products) {
  return localforage.setItem('products', products);
}