Recupero dei dati dallo storage in React Router

Vedete che per ora la nostra applicazione è statica. In questa e nelle prossime lezioni inizieremo a renderla vivace. Già nelle prossime lezioni potremo aggiungere prodotti alla lista utilizzando React Router.

In questa lezione, per cominciare, analizzeremo il recupero dei dati dallo storage. Per la memorizzazione locale dei dati utilizzeremo lo storage localForage (puoi leggere sul suo utilizzo e vantaggi nella documentazione) - un analogo di LocalStorage, supportato da tutti i browser moderni. In pratica è un'unione di diverse tecnologie di storage. Con un uso relativamente semplice, permette di memorizzare grandi volumi di dati, e di tipi diversi, comprese le immagini. Installiamolo nel nostro progetto. Digitate nel terminale:

npm i localforage

Riavvieremo la nostra applicazione. Nella cartella src creeremo un file forStorage.js, in cui ci saranno le funzioni per lavorare con lo storage.

Quindi, iniziamo con la funzione di caricamento dei prodotti dallo storage. Aggiungiamo in forStorage.js l'import della libreria e scriviamo la funzione getProducts per ottenere i prodotti:

import localforage from 'localforage';

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

Sotto, dopo il codice della funzione, aggiungeremo anche il codice per someNetwork, simulando i ritardi di rete (fino a 0.7 secondi) per il normale funzionamento delle funzioni. Se il nostro prodotto è "cachato", allora nelle funzioni per lavorare con lo storage non ci sarà ritardo, altrimenti no, ci sarà un ritardo, vedrete in seguito, come funziona:

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

Prendi l'applicazione, creata da te nei compiti delle lezioni passate. Installa nell'applicazione lo storage localForage.

Usando i materiali della lezione, crea il file forStorage.js e scrivi in esso la funzione getStudents per ottenere i dati degli studenti dallo storage.