Legge til data i lagring i React Router

I denne leksjonen skal vi jobbe med å legge til et produkt i lagring. Til å begynne med trenger vi en funksjon createProduct for å opprette et produkt, la oss legge den til i forStorage.js etter funksjonen getProducts:

forStorage.jsexport async function createProduct() {}

Først legger vi til someNetwork igjen:

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

Men heretter trenger vi en unik id for hvert produkt, du har allerede møtt dette i React-opplæringen. La oss bruke biblioteket nanoid for dette. Skriv inn følgende kommando i terminalen:

terminalnpm install --save nanoid

Importer biblioteket i forStorage.js:

forStorage.jsimport { nanoid } from 'nanoid'

La oss ha id på 6 tegn:

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

Opprinnelig, når vi oppretter produktet, vil vi kun ha id i objektet. La oss kalle getProducts, legge til det genererte produktet og oppdatere listen over våre produkter i lagring. Ferdig:

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

Funksjonen for å oppdatere listen i lagring vil være som følger (vi vil legge produktene inn under nøkkelen products), la oss plassere den etter funksjonen createProduct:

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