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