Məlumatların React Router-da depodan alınması

Görürsüz ki, hələki bizim tətbiqimiz statikdir. Bu və sonrakı dərslərdə biz onu canlandırmağa başlayacayıq. Artıq yaxın dərslərdə biz React Router istifadə edərək məhsulları siyahıya əlavə edə biləcəyik.

Bu dərsdə biz, başlanğıc olaraq, depodan məlumatların alınması ilə məşğul olacayıq. Lokal məlumat saxlanması üçün biz localForage deposundan istifadə edəcəyik (siz onun istifadəsi və üstünlükləri haqqında sənədlərdə oxuya bilərsiniz) - LocalStorage-ın analoqu, hansını ki, bütün müasir brauzerlər dəstəkləyir. Bu, əslində, bir neçə saxlama texnologiyasının birləşməsidir. Nisbətən asan istifadə ilə, o, böyük həcmdə məlumatları, o cümlədən müxtəlif tipləri, hətta şəkilləri saxlamağa imkan verir. Gəlin onu layihəmizə quraşdıraq. Terminala daxil edin:

npm i localforage

Tətbiqimizi yenidən işə salaq. src qovluğunda biz forStorage.js faylını yaradacayıq, hansında ki, depo ilə iş üçün funksiyalar olacaq.

Beləliklə, məhsulların depodan yüklənməsi funksiyası ilə başlayaq. forStorage.js faylına kitabxananı import edək və məhsulları almaq üçün getProducts funksiyasını yazaq:

import localforage from 'localforage';

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

Aşağıda, funksiya kodundan sonra biz həmçinin someNetwork üçün kodu əlavə edəcəyik, şəbəkə gecikmələrini (0.7 saniyəyə qədər) təqlid edərək funksiyaların normal işləməsi üçün. Əgər bizim məhsulumuz "keşlənibsə", onda depo ilə iş funksiyalarında gecikmə olmayacaq, əks halda isə gecikmə olacaq, siz sonradan görəcəksiniz ki, bu necə işləyir:

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);
	});
}

Əvvəlki dərslərə aid tapşırıqlarda yaratdığınız tətbiqi götürün. Tətbiqə localForage deposunu quraşdırın.

Dərs materiallarından istifadə edərək, forStorage.js faylını yaradın və onun içərisində tələbə məlumatlarını depodan almaq üçün getStudents funksiyasını yazın.