Дадаванне даных у сховішча ў React Router

У гэтым уроке мы займемся дадаваннем прадукту ў сховішча. Для пачатку нам патрэбна функцыя createProduct для стварэння прадукту, дадамо яе ў forStorage.js пасля функцыі getProducts:

forStorage.jsexport async function createProduct() {}

Спачатку зноў дадаем someNetwork:

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

А вось далей нам спатрэбіцца унікальны id для кожнага прадукту, вы ўжо сустракаліся з гэтым у дапаможніку React. Скарыстаемся для гэтага бібліятэкай nanoid. Увядзем у тэрмінале наступную каманду:

terminalnpm install --save nanoid

Імпартуем у forStorage.js бібліятэку:

forStorage.jsimport { nanoid } from 'nanoid'

Хай у нас будуць id па 6 сімвалаў:

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

Першапачаткова пры стварэнні прадукту ў нас будуць у аб'екце толькі id. Выклічам getProducts, дадамо створаны прадукт і абновім спіс нашых прадуктаў у сховішчы. Гатова:

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

Функцыя для абнаўлення спісу ў сховішчы будзе наступнай (мы будзем уносіць у яго прадукты пад ключыкам products), размясцім яе пасля функцыі createProduct:

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