Hämta data från lagring i React Router

Du ser att vår applikation hittills är statisk. I den här och kommande lektioner kommer vi att börja göra den levande. Redan i de närmaste lektionerna kommer vi att kunna lägga till produkter i listan med hjälp av React Router.

I den här lektionen kommer vi först att ta itu med att hämta data från lagringen. För lokal datalagring kommer vi att använda lagringsbiblioteket localForage (du kan läsa om dess användning och fördelar i dokumentationen) - en motsvarighet till LocalStorage, som stöds av alla moderna webbläsare. Det är faktiskt en sammanslagning av flera lagringsteknologier. Med relativt enkel användning möjliggör det lagring av stora datamängder, av olika typer, inklusive bilder. Låt oss installera det i vårt projekt. Skriv i terminalen:

npm i localforage

Låt oss starta om vår applikation. I mappen src skapar vi filen forStorage.js, som kommer att innehålla funktioner för att arbeta med lagringen.

Så, låt oss börja med funktionen för att ladda produkter från lagringen. Vi lägger till i forStorage.js import av biblioteket och skriver funktionen getProducts för att hämta produkter:

import localforage from 'localforage';

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

Nedan efter funktionskoden lägger vi också till kod för someNetwork, för att simulera nätverksfördröjningar (upp till 0,7 sekunder) för att funktionerna ska fungera normalt. Om vår produkt är "cachad", kommer det inte att finnas någon fördröjning i funktionerna för att arbeta med lagringen, om inte, kommer det att finnas en fördröjning, du kommer att se hur detta fungerar senare:

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 applikationen du skapade i uppgifterna till tidigare lektioner. Installera lagringsbiblioteket localForage i applikationen.

Använd materialet från lektionen, skapa filen forStorage.js och skriv i den funktionen getStudents för att hämta studentdata från lagringen.