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:

forStorage.jsexport async function createProduct() {}

Zuerst fügen wir wieder someNetwork hinzu:

forStorage.jsexport 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:

terminalnpm install --save nanoid

Importieren wir die Bibliothek in forStorage.js:

forStorage.jsimport { nanoid } from 'nanoid'

Lassen Sie uns id mit 6 Zeichen haben:

forStorage.jsexport 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:

forStorage.jsexport 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:

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