Učitavanje podataka stranice preko URL parametara iz skladišta u React Router

Sada možemo da dodajemo proizvode u našu aplikaciju. Pokrenite aplikaciju, dodajte pomoću dugmeta par proizvoda. Ako sada kliknemo na same proizvode u listi, videćemo da svaki proizvod još uvek ima istu statičku stranicu, kojom ćemo se baviti u ovoj i narednim lekcijama.

Takođe je potrebno napomenuti još jednu stvar. Uopšteno, ceo URL je podeljen na segmente - to su delovi URL-a između znaka /. Verovatno se sećate da smo prilikom kreiranja ove aplikacije naveli putanju 'products/:productId', pa je :productId ovde nazvan dinamičkim segmentom. Ispred njega se stavlja znak ':'. Vrednosti u ovom segmentu će se menjati, upravo one dolaze u URL parametre (URL Params ili params), koji se prosleđuju učitaču pod određenim ključem, u našem slučaju to će biti params.productId.

Pogledajte adresnu traku u pretraživaču, kada kliknete na proizvode u listi. Videćete, da se poslednji segment u adresnoj traci menja, upravo te vrednosti će doći u učitač. A naši proizvodi u skladištu imaju jedinstveni id koji smo generisali, tako da će nam se učitati onaj proizvod koji nam je potreban.

A sada nakon kratkog odstupanja hajde da konačno poradimo na stranici proizvoda, tačnije - na učitavanju podataka iz skladišta.

Ponovimo poznati proces. Za početak u forStorage.js dodajmo funkciju getProduct za dobijanje podataka određenog proizvoda iz skladišta po id. Ovde već prosleđujemo u funkciju id i, shodno tome, ako je proizvod "keširan", onda će se prikazati bez kašnjenja:

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

Zatim nam je potrebno da dobijemo niz proizvoda i među njima nađemo naš proizvod po prosleđenom 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;
}

Uzmite aplikaciju koju ste kreirali u zadacima za prethodne lekcije. Koristeći materijale iz lekcije, kreirajte u forStorage.js funkciju getStudent za dobijanje podataka studenta po id.