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