Hinzufügen von Daten zum Speicher in React Router

In dieser Lektion werden wir uns mit dem Hinzufügen eines Produkts zum Speicher beschäftigen. Zunächst benötigen wir eine Funktion createProduct zur Erstellung eines Produkts, fügen wir sie in forStorage.js nach der Funktion getProducts hinzu:

export async function createProduct() {}

Zuerst fügen wir wieder someNetwork hinzu:

export async function createProduct() {
	await someNetwork();
}

Danach benötigen wir eine eindeutige id für jedes Produkt, damit sind Sie bereits im React-Tutorial in Berührung gekommen. Verwenden wir dafür die Bibliothek nanoid. Geben Sie im Terminal folgenden Befehl ein:

npm install --save nanoid

Importieren wir die Bibliothek in forStorage.js:

import { nanoid } from 'nanoid'

Lassen Sie uns id mit 6 Zeichen haben:

export async function createProduct() {
	await someNetwork();
	let id = nanoid(6);
}

Ursprünglich werden wir beim Erstellen eines Produkts nur id im Objekt haben. Rufen wir getProducts auf, fügen das generierte Produkt hinzu und aktualisieren die Liste unserer Produkte im Speicher. Fertig:

export async function createProduct() {
	await someNetwork();
	let id = nanoid(6);
	let product = { id };
	let products = await getProducts();
	products.unshift(product);
	await setProducts(products);
	return product;
}

Die Funktion zum Aktualisieren der Liste im Speicher lautet wie folgt (wir werden die Produkte unter dem Schlüssel products speichern), platzieren wir sie nach der Funktion createProduct:

function setProducts(products) {
	return localforage.setItem('products', products);
}

Nehmen Sie die Anwendung, die Sie in den Aufgaben zu vorherigen Lektionen erstellt haben. Schreiben Sie unter Verwendung des Lehrmaterials in forStorage.js die Funktion createStudent und setStudents zum Hinzufügen von Studentendaten zum Speicher.