Добавяне на данни в хранилището в 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);
}