Տվյալների ավելացում պահեստում 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);
}