Загрузка даных старонкі па 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.