Načítanie údajov stránky z úložiska podľa parametrov URL v React Router

Teraz môžeme pridávať produkty do našej aplikácie. Spustite aplikáciu, pridajte tlačidlom pár produktov. Ak teraz klikáme na samotné produkty v zozname, uvidíme, že každý produkt má zatiaľ stále rovnakú statickú stránku, ktorou sa budeme zaoberať v tejto a nasledujúcich lekciách.

Tiež je potrebné spomenúť ešte jednu vec. Celá URL je rozdelená na segmenty - to sú časti URL medzi znakmi /. Pravdepodobne si pamätáte, že pri vytváraní tejto aplikácie sme zadali cestu 'products/:productId', takže :productId sa tu nazýva dynamický segment. Pred ním sa umiestňuje symbol ':'. Hodnoty v tomto segmente sa budú meniť, práve oni sa dostávajú do parametrov URL (URL Params alebo params), ktoré sa odovzdávajú načítavaču pod určitým kľúčom, v našom prípade to bude params.productId.

Pozrite sa na adresný riadok v prehliadači, keď klikáte na produkty v zozname. Uvidíte, že posledný segment v adresnom riadku sa mení, práve tieto hodnoty sa budú dostávať do načítavača. A naše produkty v úložisku majú jedinečný nami vygenerovaný id, takže sa nám bude načítavať ten produkt, ktorý potrebujeme.

A teraz po krátkom odbočení sa konečne pustíme do práce so stránkou produktu, konkrétne - s načítavaním údajov z úložiska.

Zopakujeme si známy proces. Najprv do forStorage.js pridáme funkciu getProduct na získanie údajov konkrétneho produktu z úložiska podľa id. Tu už budeme odovzdávať do funkcie id a, zodpovedajúcim spôsobom, ak je produkt u nás "vyrovnávacej pamäti", tak sa bude zobrazovať bez oneskorenia:

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

Ďalej potrebujeme získať pole produktov a medzi nimi nájsť náš produkt podľa odovzdaného 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;
}

Vezmite aplikáciu, ktorú ste vytvorili v úlohách k predchádzajúcim lekciám. Používajúc materiály lekcie, vytvorte v forStorage.js funkciu getStudent na získanie údajov študenta podľa id.