React RouterでのURLパラメータを使用したストレージからのページデータ読み込み

これで、アプリケーションに商品を追加できるようになりました。アプリケーションを起動し、ボタンでいくつかの商品を追加してください。リスト内の商品自体をクリックすると、各商品にはまだ同じ静的なページが表示されていることがわかりますが、このページについてはこのレッスンと次のレッスンで取り組みます。

また、もう一つ注意点があります。一般的に、URL全体はセグメントに分割されます。これは、スラッシュ/で区切られたURLの部分です。このアプリケーションを作成した際に、パス'products/:productId'を指定したことを覚えているかもしれません。ここで:productIdは動的セグメントと呼ばれます。その前にはコロン':'が付けられます。このセグメントの値は変更され、これらがURLパラメータ（URL Paramsまたはparams）として特定のキーでローダーに渡されます。この場合、それはparams.productIdになります。

リスト内の商品をクリックするとき、ブラウザのアドレスバーを見てみてください。アドレスバーの最後のセグメントが変更されていることがわかります。まさにこれらの値がローダーに渡されます。また、ストレージ内の商品には私たちが生成した一意のidがあります。したがって、必要な商品が読み込まれることになります。

少し余談がありましたが、そろそろ商品ページ、具体的にはストレージからのデータ読み込みについて実際に取り組みましょう。

おなじみのプロセスを繰り返します。まず、forStorage.jsに、idでストレージから特定の商品データを取得するための関数getProductを追加します。ここでは関数にidを渡し、もし商品が「キャッシュ」されている場合は遅延なく出力されます。

export async function getProduct(id) {
	await someNetwork(`product:${id}`);
}

次に、商品の配列を取得し、その中から渡されたidで商品を見つける必要があります。

export async function getProduct(id) {
	await someNetwork(`product:${id}`);
	let products = await localforage.getItem('products');
	let product = products.find((product) => product.id === id);
	return product ?? null;
}

過去のレッスンの課題で作成したアプリケーションを使用してください。レッスンの資料を参考に、forStorage.jsにidで学生データを取得するための関数getStudentを作成してください。