Adatok hozzáadása a tárolóhoz React Routerben

Ebben a leckében azzal foglalkozunk, hogy terméket adunk a tárolóhoz. Először szükségünk van egy createProduct függvényre a termék létrehozásához, adjuk hozzá a forStorage.js fájlhoz a getProducts függvény után:

forStorage.jsexport async function createProduct() {}

Először ismét hozzáadjuk a someNetwork-ot:

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

Ezután egy egyedi azonosítóra lesz szükségünk minden egyes termékhez, ezzel már találkoztatok a React tananyagban. Használjuk ehhez a nanoid könyvtárat. Írjuk be a terminálba a következő parancsot:

terminalnpm install --save nanoid

Importáljuk a forStorage.js fájlba a könyvtárat:

forStorage.jsimport { nanoid } from 'nanoid'

Legyen a id 6 karakter hosszú:

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

Kezdetben, amikor létrehozzuk a terméket, csak a id lesz az objektumban. Hívjuk meg a getProducts függvényt, adjuk hozzá a generált terméket, és frissítsük a termékek listáját a tárolóban. Kész:

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

A lista tárolóban történő frissítéséhez szükséges függvény a következő lesz (a products kulcs alatt mentjük el a termékeket), helyezzük a createProduct függvény után:

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