Gegevens ophalen uit opslag in React Router

Je ziet dat onze applicatie voorlopig statisch is. In deze en de volgende lessen beginnen we deze levendiger te maken. Al in de komende lessen zullen we producten aan de lijst kunnen toevoegen met behulp van React Router.

In deze les gaan we ons eerst verdiepen in het ophalen van gegevens uit de opslag. Voor lokale gegevensopslag gebruiken we de opslag localForage (je kunt meer lezen over het gebruik en de voordelen in de documentatie) - een equivalent van LocalStorage, dat door alle moderne browsers wordt ondersteund. In feite is het een combinatie van meerdere opslagtechnologieën. Met relatief eenvoudig gebruik maakt het het mogelijk om grote hoeveelheden gegevens op te slaan, en van verschillende types, inclusief afbeeldingen. Laten we het in ons project installeren. Typ in de terminal:

npm i localforage

Laten we onze applicatie herstarten. In de map src maken we een bestand forStorage.js, waarin functies voor het werken met de opslag zullen staan.

Laten we beginnen met de functie voor het laden van producten uit de opslag. We voegen in forStorage.js een import van de bibliotheek toe en schrijven de functie getProducts voor het ophalen van producten:

import localforage from 'localforage';

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

Hieronder, na de code van de functie, voegen we ook code toe voor someNetwork, om netwerkvertragingen (tot 0,7 seconden) te simuleren voor de normale werking van de functies. Als ons product "gecachet" is, dan is er geen vertraging in de functies voor het werken met de opslag, zo niet, dan is er wel vertraging, je ziet later hoe dit werkt:

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

Neem de applicatie die je hebt gemaakt in de opdrachten bij de vorige lessen. Installeer in de applicatie de opslag localForage.

Gebruikmakend van de lesmaterialen, creëer het bestand forStorage.js en schrijf erin de functie getStudents voor het ophalen van studentengegevens uit de opslag.