Přidávání dat do úložiště v React Router

V této lekci se budeme zabývat přidáváním produktu do úložiště. Pro začátek potřebujeme funkci createProduct pro vytvoření produktu, přidejme ji do forStorage.js za funkci getProducts:

forStorage.jsexport async function createProduct() {}

Nejprve znovu přidáme someNetwork:

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

A dále budeme potřebovat unikátní id pro každý produkt, již jste se s tím setkali v učebnici Reactu. Použijeme k tomu knihovnu nanoid. Zadejme v terminálu následující příkaz:

terminalnpm install --save nanoid

Importujme do forStorage.js knihovnu:

forStorage.jsimport { nanoid } from 'nanoid'

Nechť máme id po 6 znacích:

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

Původně při vytváření produktu budeme mít v objektu pouze id. Zavoláme getProducts, přidáme vygenerovaný produkt a aktualizujeme seznam našich produktů v úložišti. 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;
}

Funkce pro aktualizaci seznamu v úložišti bude následující (budeme do něj ukládat produkty pod klíčem products), umístíme ji za funkci createProduct:

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