გვერდის მონაცემების ჩატვირთვა 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-ის მიხედვით.