Загрузка данных страницы по 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 fakeNetwork(`product:${id}`);
let products = await localforage.getItem('products');
let product = products.find((product) => product.id === id);
return product ?? null;
}
Возьмите приложение, созданное вами в
заданиях к прошлым урокам. Пользуясь
материалами урока, создайте в
forStorage.js функцию
getStudent для получения
данных студента по id.