React Routerでのストアからのデータ取得

現在、私たちのアプリケーションは静的な状態であることがわかります。このレッスンと次のレッスンで、それを動的にしていきます。早ければ次のレッスンで、React Routerを使用して商品リストに商品を追加できるようになるでしょう。

このレッスンでは、まずストアからのデータ取得について理解を深めます。ローカルデータストレージには、localForageを使用します（その使用法と利点についてはドキュメンテーションで読むことができます） - これは、すべてのモダンブラウザでサポートされているLocalStorageの類似品です。実際には、複数のストレージ技術を組み合わせたものです。比較的簡単に使用できながら、大量のデータ、さらには画像を含むさまざまなタイプのデータを保存できます。それでは、プロジェクトにインストールしましょう。ターミナルで以下を入力してください：

npm i localforage

アプリケーションを再起動しましょう。フォルダsrcに、ストレージ操作用の関数を含むファイルforStorage.jsを作成します。

では、ストレージからの商品読み込み関数から始めましょう。 forStorage.jsにライブラリのインポートを追加し、商品を取得するための関数getProductsを書きましょう：

import localforage from 'localforage';

export async function getProducts() {
	await someNetwork();
	let products = await localforage.getItem('products');
	if (!products) products = [];
	return products;
}

関数コードの後、以下の部分に、ネットワーク遅延（最大0.7秒）をシミュレートするためのsomeNetworkのコードも追加します。これにより、ストレージ操作用関数が正常に動作します。商品が「キャッシュ」されている場合、ストレージ操作用関数には遅延は発生しません。そうでない場合、遅延が発生します。後でその動作を確認できるでしょう：

let someCache = {};

async function someNetwork(key) {
	if (!key) {
		someCache = {};
	}

	if (someCache[key]) {
		return;
	}

	someCache[key] = true;

	return new Promise((res) => {
		setTimeout(res, Math.random() * 700);
	});
}

これまでのレッスンの課題で作成したアプリケーションを使用してください。アプリケーションにlocalForageストレージをインストールしてください。

レッスンの教材を参考に、ファイルforStorage.jsを作成し、その中にストレージから学生データを取得するための関数getStudentsを書いてください。