Nalaganje podatkov strani iz URL parametrov iz shrambe v React Router

Zdaj lahko dodajamo produkte v našo aplikacijo. Zaženite aplikacijo, dodajte z gumbom nekaj produktov. Če zdaj kliknemo na produkte same na seznamu, bomo videli, da ima vsak produkt še vedno enako statično stran, s katero se bomo ukvarjali v tej in naslednjih lekcijah.

Prav tako je treba omeniti še eno stvar. Na splošno je celoten URL razdeljen na segmente - to so del URL-ja med znaki /. Verjetno se spomnite, da smo pri ustvarjanju te aplikacije določili pot 'products/:productId', torej :productId se tu imenuje dinamični segment. Pred njim je postavljen znak ':'. Vrednosti v tem segmentu se bodo spreminjale, prav te pridejo v URL parametre (URL Params ali params), ki se prenesejo v nalagalnik pod določenim ključem, v našem primeru bo to params.productId.

Poglejte naslovno vrstico v brskalniku, ko kliknete na produkte na seznamu. Videli boste, da se zadnji segment v naslovni vrstici spreminja, prav te vrednosti bodo prišle v nalagalnik. Naši produkti v shrambi imajo edinstven id, ki smo ga sami generirali, tako da se bo nalagal ravno tisti produkt, ki ga potrebujemo.

In zdaj, po kratkem odstopanju, pa se končno posvetimo strani produkta, natančneje - z nalaganjem podatkov iz shrambe.

Ponovimo znani postopek. Najprej v forStorage.js dodajmo funkcijo getProduct za pridobivanje podatkov določenega produkta iz shrambe po id. Tukaj bomo že prenašali v funkcijo id in, ustrezno, če je produkt "predpomniljen", bo izpisal brez zakasnitve:

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

Nato moramo dobiti seznam produktov in med njimi poiskati naš produkt po posredovanem 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;
}

Vzemite aplikacijo, ki ste jo ustvarili v nalogah za prejšnje lekcije. Z uporabo gradiva lekcije ustvarite v forStorage.js funkcijo getStudent za pridobivanje podatkov študenta po id.