Hent data fra lagring i React Router

Du kan se, at vores applikation indtil nu er statisk. I denne og de følgende lektioner vil vi begynde at gøre den levende. Allerede i de nærmeste lektioner vil vi være i stand til at tilføje produkter til listen ved hjælp af React Router.

I denne lektion vil vi først og fremmest finde ud af at hente data fra lagring. Til lokal lagring af data vil vi bruge lagringsstedet localForage (du kan læse om dens brug og fordele i dokumentationen) - en analog til LocalStorage, som understøttes af alle moderne browsere. Faktisk er det en sammenslutning af flere lagringsteknologier. Ved relativt let brug giver det mulighed for at lagre store datamængder, og af forskellige typer, inklusive billeder. Lad os installere det i vores projekt. Skriv i terminalen:

npm i localforage

Lad os genstarte vores applikation. I mappen src vil vi oprette filen forStorage.js, hvor der vil være funktioner til arbejde med lagring.

Så lad os starte med funktionen til at indlæse produkter fra lagring. Lad os tilføje til forStorage.js import af biblioteket og skrive funktionen getProducts for at hente produkter:

import localforage from 'localforage';

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

Nedenunder efter kodefunktionen vil vi også tilføje koden til someNetwork, hvilket imiterer netværksforsinkelser (op til 0,7 sekunder) for normal funktion af funktionerne. Hvis vores produkt er "cached", så vil der ikke være forsinkelse i funktionerne til arbejde med lagring, hvis ikke, så vil der være forsinkelse, du vil se senere, hvordan dette fungerer:

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

Tag applikationen, som du oprettede i opgaverne til tidligere lektioner. Installer lagringsstedet localForage i applikationen.

Brug materialerne fra lektionen, opret filen forStorage.js og skriv i den funktionen getStudents for at hente studerendes data fra lagring.