Získávání dat z úložiště v React Router

Vidíte, že naše aplikace je zatím statická. V této a následujících lekcích ji začneme oživovat. Už v nejbližších lekcích budeme moci přidávat produkty do seznamu pomocí React Router.

V této lekci se nejprve podíváme na získávání dat z úložiště. Pro lokální ukládání dat budeme používat úložiště localForage (můžete si přečíst o jeho použití a výhodách v dokumentaci) - obdoba LocalStorage, kterou podporují všechny moderní prohlížeče. Ve skutečnosti jde o spojení několika technologií úložišť. Při relativně snadném použití umožňuje ukládat velké objemy dat, a to různých typů, včetně obrázků. Nainstalujme jej do našeho projektu. Zadejte do terminálu:

terminalnpm i localforage

Restartujme naši aplikaci. Ve složce src vytvoříme soubor forStorage.js, ve kterém budou funkce pro práci s úložištěm.

Začněme funkcí pro načítání produktů z úložiště. Přidejme do forStorage.js import knihovny a napišme funkci getProducts pro získání produktů:

forStorage.jsimport localforage from 'localforage';

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

Níže za kódem funkce také přidáme kód pro someNetwork, čímž budeme simulovat zpoždění sítě (až 0,7 sekundy) pro správnou funkci. Pokud je náš produkt "zakešován", ve funkcích pro práci s úložištěm nebude zpoždění, pokud ne, bude zde zpoždění, uvidíte později, jak to funguje:

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);
  });
}