Вчитување на податоци на страницата од 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.