Načítání dat stránky z úložiště podle URL parametrů v React Router

Nyní můžeme přidávat produkty do naší aplikace. Spusťte aplikaci, přidejte tlačítkem několik produktů. Pokud nyní klikneme na samotné produkty v seznamu, uvidíme, že každý produkt má zatím stejnou statickou stránku, kterou se budeme zabývat v této a následujících lekcích.

Je také nutné zmínit ještě jeden moment. Obecně je celá URL rozdělena na segmenty - to jsou části URL mezi znaky /. Pravděpodobně si pamatujete, že při vytváření této aplikace jsme zadali cestu 'products/:productId', takže :productId se zde nazývá dynamický segment. Před ním je umístěn znak ':'. Hodnoty v tomto segmentu se budou měnit, právě ony se dostanou do URL parametrů (URL Params nebo params), které jsou předávány načítací funkci pod určitým klíčem, v našem případě to bude params.productId.

Podívejte se na adresní řádek v prohlížeči, když klikáte na produkty v seznamu. Uvidíte, že poslední segment v adresním řádku se mění, právě tyto hodnoty se dostanou do načítací funkce. A naše produkty v úložišti mají jedinečné námi vygenerované id, takže se nám načte ten produkt, který potřebujeme.

A nyní po malé odbočce se konečně pustíme do práce se stránkou produktu, konkrétně - s načítáním dat z úložiště.

Zopakujeme známý proces. Nejprve do forStorage.js přidáme funkci getProduct pro získání dat konkrétního produktu z úložiště podle id. Zde již budeme předávat do funkce id a podle toho, zda je produkt "v mezipaměti", se bude zobrazovat bez zpoždění:

forStorage.jsexport async function getProduct(id) {
  await someNetwork(`product:${id}`);
}

Dále potřebujeme získat pole produktů a mezi nimi najít náš produkt podle předaného id:

forStorage.jsexport 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;
}