React Router'da ma'lumotlarni omborga qo'shish

Ushbu darsda biz mahsulotni omborga qo'shish bilan shug'ullanamiz. Boshlash uchun bizga mahsulot yaratish uchun createProduct funktsiyasi kerak, uni forStorage.js faylida getProducts funktsiyasidan keyin qo'shamiz:

forStorage.jsexport async function createProduct() {}

Avval yana someNetwork qo'shamiz:

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

Keyin esa har bir mahsulot uchun bizga noyob id kerak bo'ladi, buni siz React darsligida uchratgansiz. Buning uchun nanoid kutubxonasidan foydalanamiz. Terminalda quyidagi buyruqni kiriting:

terminalnpm install --save nanoid

Kutubxonani forStorage.js fayliga import qilamiz:

forStorage.jsimport { nanoid } from 'nanoid'

id lar 6 belgidan iborat bo'lsin:

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

Dastlab mahsulot yaratilganda uning obyektida faqat id bo'ladi. getProducts ni chaqiramiz, yaratilgan mahsulotni qo'shamiz va omborga mahsulotlar ro'yxatini yangilaymiz. Tayyor:

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

Ombordagi ro'yxatni yangilash funktsiyasi quyidagicha bo'ladi (biz unga mahsulotlarni products kaliti ostida kiritamiz), uni createProduct funktsiyasidan keyin joylashtiramiz:

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