Саҳифа маълумотларини URL параметрлари орқали React Router даги сақловидан юклаш

Энди биз иловамизга маҳсулотлар қўша оламиз. Иловани ишга туширинг, тугмача билан бир нечта маҳсулот қўшинг. Агар биз энди рўйхатдаги маҳсулотларнинг ўзини боссак, ҳар бир маҳсулотда ҳали ҳам бир хил статик саҳича кўрамиз, биз ушбу ва кейинги дарсларда шу билан шуғулланамиз.

Яна бир жиҳатни таъкидлаб ўтиш керак. Умуман олганда, бутун URL сегментларга бўлинади - бу / белгилари орасидаги URL нинг қисмлари. Сиз эътиборingizda бу иловани яратишда биз 'products/:productId' йўлини кўрсатганмиз, :productId эса динамик сегмент деб аталади. Унинг олдига ':' белгиси қўйилади. Ушбу сегментдаги қийматлар ўзгариб туради, айнан улар URL параметрларига (URL Params ёки params) тушadi, улар бизнинг ҳолимизда params.productId бўладиган махсус калит ostida юкловчига ўтказилади.

Браузердаги манзил сатрига, рўйхатдаги маҳсулотларни босганingizда қаранг. Сиз манзил сатридаги охирги сегмент ўзгарayotganini кўрасиз, айнан шу қийматлар юкловчига тушadi. Бизнинг сақловимиздаги маҳсулотларнинг ўзига хос idси бор, шу тариқа бизга керак бўлган маҳсулот юкланadi.

Энди кичик танаффусдан сўнг ниҳоят маҳсулот саҳифаси билан ишлаймиз, айниқса сақловидан маълумотларни юклаш билан.

Таниш жараённи такрорлаймиз. Аввало forStorage.js да сақловидан id бўйича маълум бир маҳсулот маълумотларини олиш учун getProduct функциясини қўшамиз. Биз бу ерда id ни функцияга ўтарамиз ва, мос равишда, агар маҳсулот бизда "кэшланган" бўлса, кечиктиришсиз чиқади:

export async function getProduct(id) {
	await someNetwork(`product:${id}`);
}

Кейин биз маҳсулотлар рўйхатини олишимиз ва улар ичидан берilgan 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 да id бўйича студент маълумотларини олиш учун getStudent функциясини яратинг.