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

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

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

terminalnpm i localforage

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

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

forStorage.jsimport localforage from 'localforage';

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

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

forStorage.jslet someCache = {};

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

  if (someCache[key]) {
    return;
  }

  someCache[key] = true;

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