React Router-yň ammaryna maglumat goşmak

Bu sapakda biz ammara önüm goşmak bilen meşgullanarys. Başlangyç üçin bize createProduct funksiýasy gerek bolup, ony forStorage.js faýlynda getProducts funksiýasyndan soň goşarys:

forStorage.jsexport async function createProduct() {}

Ilki bilen ýene bir gezek someNetwork goşýarys:

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

Indi bolsa, her önüm üçin takyklyk ID gerek, ony React okuw kitabynda ýatdan çykaran bolmaly. Bu üçin nanoid kitaphanasyny ulanarys. Terminala aşakdaky buýrugy ýazyň:

terminalnpm install --save nanoid

forStorage.js faýlyna kitaphanany import edeliň:

forStorage.jsimport { nanoid } from 'nanoid'

id-lerimiz 6 nyşandan ybarat bolsun:

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

Önüm döredilende, obýektdemizde diňe id bolar. getProducts-i çagyryp, döredilen önümi goşup we ammarymyzdaky önümleriň sanawyny täzeläliň. Taýýar:

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

Ammaryň sanawyny täzelemek üçin funksiýa aşakdaky ýaly bolar (ony ammar içine products açary astynda ýerleşdireris), ony createProduct funksiýasyndan soň ýerleşdireris:

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