Pridávanie údajov do úložiska v React Router

V tejto lekcii sa budeme zaoberať pridávaním produktu do úložiska. Na začiatok potrebujeme funkciu createProduct pre vytvorenie produktu, pridajme ju do forStorage.js po funkcii getProducts:

forStorage.jsexport async function createProduct() {}

Najprv znova pridáme someNetwork:

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

A tu už budeme potrebovať unikátne id pre každý produkt, už ste sa s tým stretli v učebnici React. Využime na to knižnicu nanoid. Zadajme v termináli nasledujúci príkaz:

terminalnpm install --save nanoid

Importujme do forStorage.js knižnicu:

forStorage.jsimport { nanoid } from 'nanoid'

Nech máme id po 6 znakov:

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

Spočiatku pri vytváraní produktu budeme mať v objekte len id. Zavolajme getProducts, pridajme vygenerovaný produkt a aktualizujme zoznam našich produktov v úložisku. Hotovo:

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

Funkcia pre aktualizáciu zoznamu v úložisku bude nasledovná (budeme do neho vkladať produkty pod kľúčikom products), umiestnime ju po funkcii createProduct:

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