Pridobivanje podatkov iz shrambe v React Router

Vidite, da je naša aplikacija za zdaj statična. V tej in naslednjih lekcijah jo bomo začeli oživljati. Že v bližnjih lekcijah bomo lahko dodajali produkte v seznam s pomočjo React Router.

V tej lekciji se bomo za začetek ukvarjali s pridobivanjem podatkov iz shrambe. Za lokalno shranjevanje podatkov bomo uporabili shrambo localForage (o njeni uporabi in prednostih lahko preberete v dokumentaciji) - analog LocalStorage, ki ga podpirajo vsi sodobni brskalniki. Dejansko je to združitev več tehnologij shramb. Ob razmeroma enostavni uporabi omogoča shranjevanje velikih količin podatkov, in to različnih tipov, vključno s slikami. Namestimo ga v naš projekt. Vtipkajte v terminalu:

npm i localforage

Ponovno zaženimo našo aplikacijo. V mapi src bomo ustvarili datoteko forStorage.js, v kateri bodo funkcije za delo s shrambo.

Torej, začnimo s funkcijo za nalaganje produktov iz shrambe. Dodajmo v forStorage.js uvoz knjižnice in napišimo funkcijo getProducts za pridobivanje produktov:

import localforage from 'localforage';

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

Spodaj za kodo funkcije bomo prav tako dodali kodo za someNetwork, s čimer bomo simulirali zamude omrežja (do 0,7 sekunde) za normalno delovanje funkcij. Če je naš produkt "predpomniljen", potem v funkcijah za delo s shrambo ne bo zamude, če ni, potem bo zamuda, kar boste videli v nadaljevanju, kako to deluje:

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

Vzemite aplikacijo, ki ste jo ustvarili v nalogah za prejšnje lekcije. Namestite v aplikacijo shrambo localForage.

Z uporabo gradiva iz lekcije ustvarite datoteko forStorage.js in v njej napišite funkcijo getStudents za pridobivanje podatkov študentov iz shrambe.