Додавање података у складиште у 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);
}