Бет деректерін URL параметрлері бойынша сақталымнан жүктеу React Router-де

Енді біз өнімдерді біздің қолданбаға қоса аламыз. Қолданбаны іске қосыңыз, түймешікпен бірнеше өнім қосыңыз. Егер біз енді тізімдегі өнімдердің өздерін бассақ, онда көреміз, әрбір өнімде әлі де бірдей статикалық бетше бар, оны біз осы және келесі сабақтарда қарастырамыз.

Сондай-ақ тағы бір сәтті атап өту қажет. Жалпы алғанда, бүкіл URL сегменттерге бөлінеді - бұл URL-дің / таңбалары арасындағы бөліктері. Сіз бұл қолданбаны жасаған кезде біз жолды көрсеткенді есте сақтаған шығарсыз 'products/:productId', :productId динамикалық сегмент деп аталады. Оның алдына ':' таңбасы қойылады. Осы сегменттегі мәндер өзгереді, дәл солар URL параметрлеріне (URL Params немесе params) түседі, олар беріледі жүктеушіге белгілі бір кілт бойынша, біздің жағдайда бұл params.productId болады.

Шолушының мекенжай жолағына қараңыз, тізімдегі өнімдерді басқан кезде. Сіз көресіз, мекенжай жолағындағы соңғы сегмент өзгереді, дәл осы мәндер жүктеушіге түседі. Ал біздің өнімдер сақталымда біздің жасаған бірегей id-ға ие, осылайша бізге қажет өнім жүктелетін болады.

Енді шағын ауытқудан кейін келіңіздер, ақырында өнім бетімен жұмыс істейік, дәлірек айтқанда - деректерді сақталымнан жүктеумен.

Таныс процесс қайталайық. Алдымен forStorage.js файлына функция қосамыз getProduct, сақталымнан нақты өнімнің деректерін id бойынша алу үшін. Мұнда біз artқан функцияға 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 бойынша алу үшін.