მონაცემების მიღება საცავიდან React Router-ში

თქვენ ხედავთ, რომ ჩვენი აპლიკაცია ჯერ კიდევ სტატიკურია. ამ და მომდევნო გაკვეთილებში ჩვენ მას სიცოცხლეს მივაცემთ. უკვე მომდევნო გაკვეთილებზე ჩვენ შევძლებთ პროდუქტების დამატებას სიაში React Router-ის გამოყენებით.

ამ გაკვეთილში ჩვენ, დასაწყისისთვის, გავერკვევით მონაცემების საცავიდან მიღებაში. ლოკალური მონაცემების შესანახად ჩვენ გამოვიყენებთ localForage საცავს (თქვენ შეგიძლიათ წაიკითხოთ მისი გამოყენების და უპირატესობების შესახებ დოკუმენტაციაში) - LocalStorage-ის ანალოგი, რომელსაც ყველა თანამედროვე ბრაუზერი მხარს უჭერს. რეალურად, ეს არის რამდენიმე ტექნოლოგიის გაერთიანება საცავებისთვის. შედარებით მარტივი გამოყენების პირობებში, ის საშუალებას აძლევს შეინახოს მონაცემების დიდი მოცულობა, და სხვადასხვა ტიპის, მათ შორის სურათებიც. მოდით დავაყენოთ ის ჩვენს პროექტში. აკრიფეთ ტერმინალში:

npm i localforage

გადავუშვათ ჩვენი აპლიკაცია. საქაღალდეში src ჩვენ შევქმნით ფაილს forStorage.js, რომელშიც იქნება ფუნქციები საცავთან მუშაობისთვის.

მაშ, დავიწყოთ პროდუქტების ჩატვირთვის ფუნქციით საცავიდან. დავამატოთ forStorage.js-ში ბიბლიოთეკის იმპორტი და დავწეროთ ფუნქცია getProducts პროდუქტების მისაღებად:

import localforage from 'localforage';

export async function getProducts() {
	await someNetwork();
	let products = await localforage.getItem('products');
	if (!products) products = [];
	return products;
}

ქვემოთ, ფუნქციის კოდის შემდეგ, ჩვენ ასევე დავამატებთ კოდს someNetwork-ისთვის, რათა მოვახდინოთ ქსელის დაყოვნების (0.7 წამამდე) სიმულაცია ფუნქციების ნორმალური მუშაობისთვის. თუ ჩვენი პროდუქტი "დაქეშირებულია", მაშინ საცავთან მუშაობის ფუნქციებში დაყოვნება არ იქნება, თუ არა, მაშინ იქნება დაყოვნება, მოგვიანებით დაინახავთ, როგორ მუშაობს ეს:

let someCache = {};

async function someNetwork(key) {
	if (!key) {
		someCache = {};
	}

	if (someCache[key]) {
		return;
	}

	someCache[key] = true;

	return new Promise((res) => {
		setTimeout(res, Math.random() * 700);
	});
}

აიღეთ აპლიკაცია, რომელიც თქვენ შექმენით დავალებებში წინა გაკვეთილებისთვის. დააყენეთ აპლიკაციაში საცავი localForage.

გაკვეთილის მასალების გამოყენებით, შექმენით ფაილი forStorage.js და დაწერეთ მასში ფუნქცია getStudents სტუდენტების მონაცემების საცავიდან მისაღებად.