Lägga till data i lagring i React Router

I den här lektionen ska vi fokusera på att lägga till en produkt i lagringen. Först behöver vi en funktion createProduct för att skapa en produkt, låt oss lägga till den i forStorage.js efter funktionen getProducts:

forStorage.jsexport async function createProduct() {}

Först lägger vi till someNetwork igen:

forStorage.jsexport async function createProduct() {
  await someNetwork();
}

Sedan behöver vi ett unikt id för varje produkt, du har redan stött på detta i React-handboken. Låt oss använda biblioteket nanoid för detta. Skriv följande kommando i terminalen:

terminalnpm install --save nanoid

Importera biblioteket till forStorage.js:

forStorage.jsimport { nanoid } from 'nanoid'

Låt oss ha id på 6 tecken:

forStorage.jsexport async function createProduct() {
  await someNetwork();
  let id = nanoid(6);
}

Initialt när vi skapar produkten kommer vi bara ha id i objektet. Låt oss anropa getProducts, lägga till den genererade produkten och uppdatera vår produktlista i lagringen. Klart:

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

Funktionen för att uppdatera listan i lagringen kommer att vara följande (vi kommer att lägga in produkterna under nyckeln products), låt oss placera den efter funktionen createProduct:

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