React Router'da Depolama Veri Ekleme

Bu derste depolama ürün ekleme ile uğraşacağız. Başlangıç olarak ürün oluşturmak için createProduct fonksiyonuna ihtiyacımız var, onu forStorage.js dosyasına getProducts fonksiyonundan sonra ekleyelim:

forStorage.jsexport async function createProduct() {}

Önce tekrar someNetwork ekliyoruz:

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

Sonrasında her ürün için benzersiz bir id'ye ihtiyacımız olacak, buna React eğitiminde zaten rastlamıştınız. Bunun için nanoid kütüphanesini kullanalım. Terminale aşağıdaki komutu girelim:

terminalnpm install --save nanoid

forStorage.js dosyasına kütüphaneyi içe aktaralım:

forStorage.jsimport { nanoid } from 'nanoid'

id değerlerimiz 6 karakterli olsun:

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

Başlangıçta ürün oluştururken nesnemizde sadece id olacak. getProducts fonksiyonunu çağıralım, oluşturulan ürünü ekleyelim ve depodaki ürün listemizi güncelleyelim. Tamamlandı:

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

Listeyi depoda güncelleme fonksiyonu aşağıdaki gibi olacak (ona products anahtarı altında ürünleri ekleyeceğiz), onu createProduct fonksiyonundan sonra yerleştirelim:

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