Adatok betöltése az oldalra URL paraméterek alapján a tárolóból a React Routerban

Most már hozzáadhatunk termékeket az alkalmazásunkhoz. Indítsd el az alkalmazást, adj hozzá gombbal pár terméket. Ha most rákattintunk maga a termékekre a listában, akkor látni fogjuk, hogy minden terméknek még mindig ugyanaz a statikus oldala van, ezzel fogunk foglalkozni ebben és a következő leckékben.

Szintén fontos megjegyezni egy másik dolgot. Alapvetően az egész URL szegmensekre oszlik - ezek az URL részei a / karakterek között. Valószínűleg emlékszel, hogy amikor létrehoztuk ennek az alkalmazásnak az útvonalát, akkor megadtuk a 'products/:productId' útvonalat, nos itt a :productId neve dinamikus szegmens. Elé kerül a ':' karakter. Az ebben a szegmensben lévő értékek változni fognak, pontosan ezek kerülnek az URL paraméterekbe (URL Params vagy params), amelyek továbbítódnak a betöltőnek egy meghatározott kulcs alatt, a mi esetünkben ez a params.productId lesz.

Vess egy pillantást a böngésző címsorára, amikor rákattintasz a termékekre a listában. Látni fogod, hogy az utolsó szegmens a címsorban változik, pontosan ezek az értékek fognak a betöltőbe kerülni. A tárolóban lévő termékeinknek van egy egyedi általunk generált id-juk, így nekünk az a termék töltődik be, amelyikre szükségünk van.

És most egy kis kitérő után végre foglalkozzunk a termék oldallal, konkrétan - az adatok betöltésével a tárolóból.

Ismételjük meg az ismert folyamatot. Először a forStorage.js fájlba adjuk hozzá a getProduct függvényt egy adott termék adatainak a tárolóból való lekérésére a id alapján. Itt már átadjuk a függvénynek a id-t, és ennek megfelelően, ha a termék "gyorsítótárazva" van, akkor késleltetés nélkül jelenik meg:

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

Ezután meg kell szereznünk a termékek tömbjét és közöttük meg kell találnunk a termékünket az átadott id alapján:

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;
}

Vedd elő az általad létrehozott alkalmazást a korábbi leckék feladataiból. A lecke anyagát felhasználva hozd létre a forStorage.js fájlban a getStudent függvényt egy diák adatainak lekéréséhez a id alapján.