React Router'da Depodan Veri Alma

Uygulamamızın şu anda statik olduğunu görüyorsunuz. Bu ve sonraki derslerde onu canlandırmaya başlayacağız. Önümüzdeki derslerde zaten React Router kullanarak ürünleri listeye ekleyebileceğiz.

Bu derste, başlangıç olarak, depodan veri almayı ele alacağız. Verilerin yerel olarak saklanması için localForage deposunu kullanacağız (kullanımı ve avantajları hakkında dokümantasyondan okuyabilirsiniz) - tüm modern tarayıcıların desteklediği LocalStorage benzeri. Aslında bu, birkaç depolama teknolojisinin birleşimidir. Nispeten kolay kullanımın yanı sıra, büyük miktarda veriyi, hatta farklı türlerde, resimler dahil saklamaya izin verir. Haydi onu projemize kuralım. Terminale yazın:

npm i localforage

Uygulamamızı yeniden başlatalım. src klasöründe, depo ile çalışmak için fonksiyonların olacağı forStorage.js dosyasını oluşturacağız.

Pekala, depodan ürünleri yükleyen fonksiyonla başlayalım. forStorage.js dosyasına kütüphaneyi içe aktaralım ve ürünleri almak için getProducts fonksiyonunu yazalım:

import localforage from 'localforage';

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

Aşağıda, fonksiyon kodundan sonra, fonksiyonların düzgün çalışması için ağ gecikmelerini (0.7 saniyeye kadar) taklit ederek someNetwork için kodu ekleyeceğiz. Eğer ürünümüz "önbelleğe alınmışsa", depo ile çalışan fonksiyonlarda gecikme olmayacak, eğer yoksa, bir gecikme olacak, bunun nasıl çalıştığını ileride göreceksiniz:

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

Önceki derslerin görevlerinde oluşturduğunuz uygulamayı alın. Uygulamaya localForage deposunu kurun.

Ders materyallerinden faydalanarak, forStorage.js dosyasını oluşturun ve içinde öğrenci verilerini depodan almak için getStudents fonksiyonunu yazın.