Získávání dat z úložiště v React Router

Vidíte, že naše aplikace je zatím statická. V této a následujících lekcích ji začneme oživovat. Už v nejbližších lekcích budeme moci přidávat produkty do seznamu pomocí React Router.

V této lekci se nejprve podíváme na získávání dat z úložiště. Pro lokální ukládání dat budeme používat úložiště localForage (můžete si přečíst o jeho použití a výhodách v dokumentaci) - obdoba LocalStorage, kterou podporují všechny moderní prohlížeče. Ve skutečnosti jde o spojení několika technologií úložišť. Při relativně snadném použití umožňuje ukládat velké objemy dat, a to různých typů, včetně obrázků. Nainstalujme jej do našeho projektu. Zadejte do terminálu:

npm i localforage

Restartujme naši aplikaci. Ve složce src vytvoříme soubor forStorage.js, ve kterém budou funkce pro práci s úložištěm.

Začněme funkcí pro načítání produktů z úložiště. Přidejme do forStorage.js import knihovny a napišme funkci getProducts pro získání produktů:

import localforage from 'localforage';

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

Níže za kódem funkce také přidáme kód pro someNetwork, čímž budeme simulovat zpoždění sítě (až 0,7 sekundy) pro správnou funkci. Pokud je náš produkt "zakešován", ve funkcích pro práci s úložištěm nebude zpoždění, pokud ne, bude zde zpoždění, uvidíte později, jak 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);
	});
}

Vezměte aplikaci, kterou jste vytvořili v úkolech k předchozím lekcím. Nainstalujte do aplikace úložiště localForage.

S využitím materiálů lekce vytvořte soubor forStorage.js a napište v něm funkci getStudents pro získání dat studentů z úložiště.