Adatok lekérése a tárolóból a React Routerban

Láthatja, hogy az alkalmazásunk egyelőre statikus. Ebben és a következő leckékben elkezdjük életre keltani. A következő leckékben már tudunk termékeket hozzáadni a listához a React Router segítségével.

Ebben a leckében kezdetként foglalkozunk az adatok tárolóból való lekérésével. Az adatok helyi tárolásához a localForage tárolót fogjuk használni (használatáról és előnyeiről olvashat a dokumentációban) - ez a LocalStorage analógja, amit minden modern böngésző támogat. Lényegében több tárolótechnológia egyesítése. Viszonylag könnyű használat mellett lehetővé teszi nagy mennyiségű adat tárolását, ráadásul különböző típusúakat, beleértve a képeket is. Telepítsük a projektünkbe. Gépelje be a terminálba:

npm i localforage

Indítsuk újra az alkalmazásunkat. A src mappában létrehozunk egy forStorage.js fájlt, amely a tárolóval való munkavégzés függvényeit fogja tartalmazni.

Szóval, kezdjük a termékek tárolóból való betöltésének függvényével. Adjuk hozzá a forStorage.js fájlhoz a könyvtár importját és írjuk meg a getProducts függvényt a termékek lekéréséhez:

import localforage from 'localforage';

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

Alul, a függvény kódja után szintén hozzáadunk kódot a someNetwork számára, szimulálva a hálózati késleltetést (akár 0.7 másodpercig) a függvények megfelelő működése érdekében. Ha a termékünk "gyorsítótárazva van", akkor a tárolóval működő függvényekben nem lesz késleltetés, ha nem, akkor lesz késleltetés, a későbbiekben látni fogja, hogyan működik ez:

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

Vegye azt az alkalmazást, amit az előző leckékhez tartozó feladatokban készített. Telepítse az alkalmazásba a localForage tárolót.

A lecke anyagait felhasználva hozzon létre egy forStorage.js fájlt és írja bele a getStudents függvényt a hallgatók adatai tárolóból való lekéréséhez.