Ładowanie danych strony na podstawie parametrów URL z magazynu w React Router

Teraz możemy dodawać produkty do naszej aplikacji. Uruchom aplikację, dodaj przyciskiem kilka produktów. Jeśli teraz klikniemy na same produkty na liście, to zobaczymy, że każdy produkt ma na razie tę samą statyczną stronę, którą zajmiemy się w tej i kolejnych lekcjach.

Należy również zaznaczyć jeszcze jedną kwestię. Ogólnie cały URL dzieli się na segmenty - są to części URL między znakami /. Ty prawdopodobnie pamiętasz, że podczas tworzenia tej aplikacji wskazywaliśmy ścieżkę 'products/:productId', więc :productId nazywa się tutaj segmentem dynamicznym. Przed nim stawia się znak ':'. Wartości w tym segmencie będą się zmieniać, właśnie one trafiają do parametrów URL (URL Params lub params), które są przekazywane do ładowarki pod określonym kluczem, w naszym przypadku będzie to params.productId.

Spójrz na pasek adresu w przeglądarce, kiedy klikasz na produkty na liście. Zobaczysz, że ostatni segment w pasku adresu się zmienia, właśnie te wartości będą trafiać do ładowarki. A nasze produkty w magazynie mają unikalny wygenerowany przez nas id, w ten sposób będzie nam wczytywany ten produkt, który jest nam potrzebny.

A teraz po małym dygresji zajmijmy się wreszcie stroną produktu, a konkretnie - ładowaniem danych z magazynu.

Powtórzmy znany proces. Na początek w forStorage.js dodajmy funkcję getProduct do pobierania danych konkretnego produktu z magazynu po id. Tutaj już przekazujemy do funkcji id i, odpowiednio, jeśli produkt jest "zbuforowany", to będzie wyświetlany bez opóźnienia:

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

Następnie musimy pobrać tablicę produktów i wśród nich znaleźć nasz produkt po przekazanym 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;
}

Weź aplikację stworzoną przez Ciebie w zadaniach do poprzednich lekcji. Korzystając z materiałów lekcji, stwórz w forStorage.js funkcję getStudent do pobierania danych studenta po id.