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

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

export async function createProduct() {}

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

export async function createProduct() {
	await someNetwork();
}

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

npm install --save nanoid

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

import { nanoid } from 'nanoid'

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

export async function createProduct() {
	await someNetwork();
	let id = nanoid(6);
}

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

export 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 関数の後に配置します:

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

前回のレッスンの課題で作成したアプリケーションを使用してください。このレッスンの内容を参考に、forStorage.js ファイル内に学生データをストアに追加するための関数 createStudent と setStudents を記述してください。