Dobijanje podataka iz skladišta u React Router-u

Vidite da je naša aplikacija za sada statična. U ovoj i narednim lekcijama ćemo je početi oživljavati. Već u skorim lekcijama moći ćemo dodavati proizvode u listu pomoću React Router-a.

U ovoj lekciji ćemo se, za početak, pozabaviti dobijanjem podataka iz skladišta. Za lokalno skladištenje podataka koristićemo skladište localForage (možete pročitati o njegovoj upotrebi i prednostima u dokumentaciji) - analog LocalStorage-a, koji podržavaju svi moderni brauzeri. U stvari, to je objedinjavanje nekoliko tehnologija skladišta. Uz relativno laku upotrebu, ono omogućava skladištenje velikih količina podataka, i to različitih tipova, uključujući i slike. Hajde da ga instaliramo u naš projekt. Ukucajte u terminalu:

npm i localforage

Ponovo pokrenimo našu aplikaciju. U folderu src kreiraćemo fajl forStorage.js, u kome će biti funkcije za rad sa skladištem.

Dakle, počnimo sa funkcijom za učitavanje proizvoda iz skladišta. Dodajmo u forStorage.js import biblioteke i napišimo funkciju getProducts za dobijanje proizvoda:

import localforage from 'localforage';

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

Ispod nakon koda funkcije takođe ćemo dodati kod za someNetwork, imitirajući kašnjenje mreže (do 0.7 sekundi) za normalan rad funkcija. Ako je naš proizvod "keširan", onda u funkcijama za rad sa skladištem neće biti kašnjenja, ako nije, biće kašnjenje, videćete kasnije kako to radi:

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

Uzmite aplikaciju koju ste kreirali u zadacima za prethodne lekcije. Instalirajte u aplikaciji skladište localForage.

Koristeći materijale lekcije, kreirajte fajl forStorage.js i napišite u njemu funkciju getStudents za dobijanje podataka o studentima iz skladišta.