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