Načítanie údajov z úložiska v React Router

Vidíte, že naša aplikácia je zatiaľ statická. V tejto a nasledujúcich lekciách ju začneme oživovať. Už v najbližších lekciách budeme môcť pridávať produkty do zoznamu pomocou React Router.

V tejto lekcii sa najprv zoznámime s načítavaním údajov z úložiska. Pre lokálne ukladanie údajov použijeme úložisko localForage (viac o jeho používaní a výhodách si môžete prečítať v dokumentácii) - analóg LocalStorage, ktorý podporujú všetky moderné prehliadače. V podstate ide o spojenie niekoľkých technológií úložísk. Pri relatívne jednoduchom použití umožňuje ukladať veľké objemy údajov, a to rôznych typov, vrátane obrázkov. Nainštalujme ho do nášho projektu. Zadajte do terminálu:

npm i localforage

Reštartujme našu aplikáciu. V priečinku src vytvoríme súbor forStorage.js, v ktorom budú funkcie pre prácu s úložiskom.

Takže, začneme s funkciou na načítanie produktov z úložiska. Pridajme do forStorage.js import knižnice a napíšme funkciu getProducts na získanie produktov:

import localforage from 'localforage';

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

Nižšie za kódom funkcie tiež pridáme kód pre someNetwork, čím simulujeme oneskorenia siete (až 0,7 sekundy) pre správnu činnosť funkcií. Ak je náš produkt "vyrovnávacej pamäti", tak vo funkciách pre prácu s úložiskom nebude oneskorenie, ak nie, tak bude oneskorenie, uvidíte neskôr, ako to funguje:

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

Vezmite aplikáciu, ktorú ste vytvorili v úlohách z predchádzajúcich lekcií. Nainštalujte do aplikácie úložisko localForage.

S použitím materiálov z lekcie vytvorte súbor forStorage.js a napíšte do neho funkciu getStudents na získanie údajov študentov z úložiska.