Obținerea datelor din stocare în React Router

Vedeți că deocamdată aplicația noastră este statică. În această și în lecțiile următoare vom începe să o animăm. Deja în lecțiile viitoare vom putea adăuga produse în listă cu ajutorul React Router.

În această lecție, pentru început, ne vom ocupa de obținerea datelor din stocare. Pentru stocarea locală a datelor vom folosi stocarea localForage (puteți citi despre utilizarea și avantajele sale în documentație) - un analog al LocalStorage, care este suportat de toate browserele moderne. De fapt, este o unificare a mai multor tehnologii de stocare. Cu o utilizare relativ ușoară, permite stocarea unor volume mari de date, și de tipuri diferite, inclusiv imagini. Să îl instalăm în proiectul nostru. Tastați în terminal:

npm i localforage

Să repornim aplicația noastră. În folderul src vom crea fișierul forStorage.js, în care vor fi funcții pentru lucrul cu stocarea.

Așadar, să începem cu funcția de încărcare a produselor din stocare. Să adăugăm în forStorage.js importul bibliotecii și să scriem funcția getProducts pentru obținerea produselor:

import localforage from 'localforage';

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

Mai jos după codul funcției vom adăuga și codul pentru someNetwork, simulând întârzieri de rețea (până la 0,7 secunde) pentru funcționarea normală a funcțiilor. Dacă produsul nostru este "cache-uit", atunci în funcțiile pentru lucrul cu stocarea nu va exista întârziere, dacă nu, atunci va exista întârziere, veți vedea în continuare, cum funcționează:

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

Luați aplicația creată de dvs. în sarcinile din lecțiile trecute. Instalați în aplicație stocarea localForage.

Folosind materialele lecției, creați fișierul forStorage.js și scrieți în el funcția getStudents pentru obținerea datelor studenților din stocare.