Məlumatların React Router-da anbara əlavə edilməsi

Bu dərsdə biz məhsulu anbara əlavə etməklə məşğul olacayıq. Əvvəlcə bizə məhsul yaratmaq üçün createProduct funksiyası lazımdır, onu forStorage.js faylında getProducts funksiyasından sonra əlavə edək:

forStorage.jsexport async function createProduct() {}

Əvvəlcə yenidən someNetwork əlavə edirik:

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

Bundan sonra bizə hər bir məhsul üçün unikal id lazımdır, siz artıq React dərsliyində bununla qarşılaşmısınız. Bunun üçün nanoid kitabxanasından istifadə edək. Terminalda aşağıdakı əmri daxil edək:

terminalnpm install --save nanoid

Kitabxananı forStorage.js faylına import edək:

forStorage.jsimport { nanoid } from 'nanoid'

Gəlin id-lərimiz 6 simvoldan ibarət olsun:

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

Məhsul yaradılarkən əvvəlcə bizim obyektimizdə yalnız id olacaq. getProducts funksiyasını çağıraq, yaradılan məhsulu əlavə edək və anbardakı məhsul siyahımızı yeniləyək. Hazırdır:

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

Siyahını anbarda yeniləmək üçün funksiya aşağıdakı kimi olacaq (biz onun içinə məhsulları products açarı altında əlavə edəcəyik), onu createProduct funksiyasından sonra yerləşdirək:

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