Ngarkimi i të dhënave të faqes sipas parametrave URL nga depozita në React Router

Tani mund të shtojmë produkte në aplikacionin tonë. Nisni aplikacionin, shtoni me buton disa produkte. Nëse tani klikojmë në vetë produktet në listë, do të shohim që secili produkt ka ende të njëjtën faqe statike, të cilën do të merremi në këtë dhe mësimet e ardhshme.

Gjithashtu është e nevojshme të theksohet edhe një moment. Në përgjithësi, i gjithë URL ndahet në segmente - këto janë pjesët e URL-it midis simboleve /. Ju ndoshta mbani mend se kur krijuam këtë aplikacion, ne specifikuam rrugën 'products/:productId', pra :productId quhet këtu segment dinamik. Para tij vendoset simboli ':'. Vlerat në këtë segment do të ndryshojnë, pikërisht ato bien në parametrat URL (URL Params ose params), të cilat transmetohen në ngarkues nën një çelës të caktuar, në rastin tonë ky do të jetë params.productId.

Hidhni një sy shiritit të adresave në shfletues, kur klikoni në produktet në listë. Do të shihni që segmenti i fundit në shiritin e adresave ndryshon, pikërisht këto vlera do të bien në ngarkues. Dhe produktet tona në depozitë kanë një unik id të gjeneruar nga ne, kështu do të ngarkohet ai produkt që na nevojitet.

Dhe tani pas një devijimi të vogël le të fillojmë më në fund të punojmë me faqen e produktit, më konkretisht - me ngarkimin e të dhënave nga depozita.

Le të përsërisim procesin e njohur. Për fillim në forStorage.js le të shtojmë funksionin getProduct për marrjen e të dhënave të një produkti të caktuar nga depozita sipas id. Këtu tani do të transmetojmë në funksion id dhe, në përputhje me rrethanat, nëse produkti ynë është "i fshehur në cache", do të shfaqet pa vonesë:

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

Më pas na duhet të marrim një grup produktesh dhe midis tyre të gjejmë produktin tonë sipas id të transmetuar:

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

Merrni aplikacionin e krijuar nga ju në detyrat e mësimeve të kaluara. Duke përdorur materialet e mësimit, krijoni në forStorage.js funksionin getStudent për marrjen e të dhënave të studentit sipas id.