Adăugarea datelor în stocarea în React Router

În această lecție ne vom ocupa de adăugarea unui produs în stocare. Pentru început avem nevoie de o funcție createProduct pentru crearea produsului, să o adăugăm în forStorage.js după funcția getProducts:

forStorage.jsexport async function createProduct() {}

Mai întâi adăugăm din nou someNetwork:

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

Iar apoi vom avea nevoie de un id unic pentru fiecare produs, ați mai întâlnit asta în tutorialul React. Vom folosi pentru aceasta biblioteca nanoid. Introducem în terminal următoarea comandă:

terminalnpm install --save nanoid

Importăm în forStorage.js biblioteca:

forStorage.jsimport { nanoid } from 'nanoid'

Să avem id cu 6 caractere:

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

Inițial la crearea produsului vom avea în obiect doar id. Apelăm getProducts, adăugăm produsul generat și actualizăm lista noastră de produse în stocare. Gata:

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

Funcția pentru actualizarea listei în stocare va fi următoarea (vom introduce în ea produsele sub cheia products), să o plasăm după funcția createProduct:

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