Daten aus dem Speicher in React Router abrufen

Sie sehen, dass unsere Anwendung vorerst statisch ist. In dieser und den folgenden Lektionen werden wir beginnen, sie zum Leben zu erwecken. Bereits in den nächsten Lektionen werden wir in der Lage sein, Produkte mit Hilfe von React Router zur Liste hinzuzufügen.

In dieser Lektion werden wir uns zunächst mit der Datengewinnung aus dem Speicher befassen. Für die lokale Datenspeicherung verwenden wir den Speicher localForage (Sie können mehr über seine Verwendung und Vorteile in der Dokumentation lesen) - ein Analogon zum LocalStorage, das von allen modernen Browsern unterstützt wird. Tatsächlich ist es eine Vereinigung mehrerer Speichertechnologien. Bei relativ einfacher Handhabung ermöglicht es, große Datenmengen zu speichern, und zwar verschiedene Typen, einschließlich Bilder. Lassen Sie es uns in unser Projekt installieren. Geben Sie im Terminal ein:

npm i localforage

Starten wir unsere Anwendung neu. Im Ordner src erstellen wir eine Datei forStorage.js, in der sich Funktionen für die Arbeit mit dem Speicher befinden werden.

Beginnen wir also mit der Funktion zum Laden von Produkten aus dem Speicher. Wir fügen in forStorage.js den Import der Bibliothek hinzu und schreiben die Funktion getProducts zum Abrufen der Produkte:

import localforage from 'localforage';

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

Unten nach dem Funktionscode fügen wir auch Code für someNetwork hinzu, um Netzwerkverzögerungen (bis zu 0,7 Sekunden) für die ordnungsgemäße Funktion der Funktionen zu simulieren. Wenn unser Produkt "gecached" ist, dann gibt es in den Funktionen für die Arbeit mit dem Speicher keine Verzögerung, wenn nicht, dann gibt es eine Verzögerung, Sie werden später sehen, wie das funktioniert:

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

Nehmen Sie die Anwendung, die Sie in den Aufgaben der vorherigen Lektionen erstellt haben. Installieren Sie in der Anwendung den Speicher localForage.

Erstellen Sie unter Verwendung des Unterrichtsmaterials die Datei forStorage.js und schreiben Sie darin die Funktion getStudents zum Abrufen der Studentendaten aus dem Speicher.