Էջի տվյալների բեռնումը URL պարամետրերից պահեստից React Router-ում

Այժմ մենք կարող ենք ապրանքներ ավելացնել մեր հավելվածին: Գործարկեք հավելվածը, ավելացրեք մի քանի ապրանք կոճակով: Եթե հիմա սեղմենք հենց ապրանքների վրա ցանկում, ապա կտեսնենք, որ յուրաքանչյուր ապրանք դեռ ունի նույն ստատիկ էջը, որով մենք կզբաղվենք այս և հաջորդ դասերում:

Պետք է նշել ևս մեկ կետ: Ընդհանրապես, ամբողջ URL-ը բաժանված է հատվածների - դրանք URL-ի այն մասերն են, որոնք գտնվում են / նշանների միջև: Դուք հավանաբար հիշում եք, որ այս հավելվածը ստեղծելիս մենք նշեցինք ճանապարհը 'products/:productId', ուրեմն :productId-ն այստեղ կոչվում է դինամիկ հատված: Դրանից առաջ դրվում է ':' նշանը: Այս հատվածի արժեքները կփոխվեն, հենց դրանք են ընկնում URL պարամետրերի մեջ (URL Params կամ params), որոնք փոխանցվում են բեռնիչին որոշակի բանալիով, մեր դեպքում դա կլինի params.productId:

Նայեք դիտարկիչի հասցեի տողին, երբ սեղմում եք ապրանքների վրա ցանկում: Կտեսնեք, որ հասցեի տողի վերջին հատվածը փոխվում է, հենց այս արժեքներն են ընկնելու բեռնիչի մեջ: Իսկ մեր ապրանքները պահեստում ունեն մեր կողմից ստեղծված ունիկալ id, այսպիսով մեզ կբեռնարկվի այն ապրանքը, որն մեզ անհրաժեշտ է:

Եվ հիմա, փոքրիկ շեղումից հետո, եկեք վերջապես աշխատենք ապրանքի էջի հետ, ավելի կոնկրետ՝ պահեստից տվյալների բեռնման հետ:

Կկրկնենք ծանոթ գործընթացը: Սկզբում forStorage.js-ում ավելացնենք ֆունկցիա getProduct՝ կոնկրետ ապրանքի տվյալները պահեստից ստանալու համար ըստ id-ի: Այստեղ մենք արդեն կփոխանցենք ֆունկցիային id-ն և, համապատասխանաբար, եթե ապրանքը մեր մոտ "կեշավորված է", ապա այն կցուցադրվի առանց ուշացման:

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

Հաջորդը, մենք պետք է ստանանք ապրանքների զանգված և դրանցից գտնենք մեր ապրանքը փոխանցված 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;
}

Վերցրեք ձեր ստեղծած հավելվածը նախորդ դասերի առաջադրանքներում: Օգտագործելով դասի նյութերը, ստեղծեք forStorage.js ֆայլում getStudent ֆունկցիան՝ ուսանողի տվյալները ըստ id-ի ստանալու համար: