Henting av data fra lagring i React Router

Du ser at applikasjonen vår foreløpig er statisk. I denne og de påfølgende leksjonene skal vi begynne å gi den liv. Allerede i de nærmeste leksjonene vil vi kunne legge til produkter i listen ved hjelp av React Router.

I denne leksjonen skal vi først finne ut av henting av data fra lagring. For lokal lagring av data skal vi bruke lagringssystemet localForage (du kan lese om bruken og fordelene i dokumentasjonen) - en analog til LocalStorage, som støttes av alle moderne nettlesere. Det er faktisk en sammenslåing av flere lagringsteknologier. Med relativt enkel bruk, muliggjør det lagring av store datamengder, og av ulike typer, inkludert bilder. La oss installere det i prosjektet vårt. Skriv i terminalen:

npm i localforage

La oss starte applikasjonen vår på nytt. I mappen src skal vi opprette filen forStorage.js, der det vil være funksjoner for arbeid med lagring.

Så, la oss starte med funksjonen for lasting av produkter fra lagring. La oss legge til i forStorage.js import av biblioteket og skrive funksjonen getProducts for å hente produkter:

import localforage from 'localforage';

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

Nedenfor etter funksjonskoden vil vi også legge til kode for someNetwork, for å imitere nettverksforsinkelser (opptil 0.7 sekunder) for normal funksjon av funksjonene. Hvis produktet vårt er "hurtigbuffert", vil det ikke være forsinkelse i funksjonene for arbeid med lagring, hvis ikke, vil det 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);
	});
}

Ta applikasjonen du opprettet i oppgavene til de foregående leksjonene. Installer lagringssystemet localForage i applikasjonen.

Bruk materialet fra leksjonen, opprett filen forStorage.js og skriv i den funksjonen getStudents for å hente studentdata fra lagring.