Dodawanie danych do magazynu w React Router

W tej lekcji zajmiemy się dodawaniem produktu do magazynu. Na początek potrzebujemy funkcji createProduct do tworzenia produktu, dodajmy ją w forStorage.js po funkcji getProducts:

forStorage.jsexport async function createProduct() {}

Najpierw ponownie dodajemy someNetwork:

forStorage.jsexport async function createProduct() {
  await someNetwork();
}

A dalej będziemy potrzebować unikalnego id dla każdego produktu, już spotkaliście się z tym w tutorialu React. Wykorzystajmy do tego bibliotekę nanoid. Wprowadźmy w terminalu następujące polecenie:

terminalnpm install --save nanoid

Zaimportujmy w forStorage.js bibliotekę:

forStorage.jsimport { nanoid } from 'nanoid'

Niech będziemy mieli id po 6 znaków:

forStorage.jsexport async function createProduct() {
  await someNetwork();
  let id = nanoid(6);
}

Początkowo przy tworzeniu produktu będziemy mieli w obiekcie tylko id. Wywołajmy getProducts, dodajmy wygenerowany produkt i zaktualizujmy listę naszych produktów w magazynie. Gotowe:

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

Funkcja do aktualizacji listy w magazynie będzie następująca (będziemy umieszczać w nim produkty pod kluczem products), umieśćmy ją po funkcji createProduct:

forStorage.jsfunction setProducts(products) {
  return localforage.setItem('products', products);
}