მონაცემების საცავში დამატება 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);
}