Зареждане на данни за страница от 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.