Datu pievienošana React Router krātuvē

Šajā nodarbībā mēs nodarbosimies ar produkta pievienošanu krātuvē. Vispirms mums vajag funkciju createProduct, lai izveidotu produktu, pievienosim to forStorage.js pēc funkcijas getProducts:

forStorage.jsexport async function createProduct() {}

Vispirms atkal pievienojam someNetwork:

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

Tālāk mums būs nepieciešams unikāls id katram produktam, jūs jau esat sastapušies ar to React mācību grāmatā. Izmantosim šim nolūkam bibliotēku nanoid. Ievadīsim terminālī šādu komandu:

terminalnpm install --save nanoid

Importējam forStorage.js bibliotēku:

forStorage.jsimport { nanoid } from 'nanoid'

Lai mums būtu id pa 6 simboliem:

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

Sākotnēji, izveidojot produktu, mums būs objektā tikai id. Izsauksim getProducts, pievienosim ģenerēto produktu un atjaunināsim mūsu produktu sarakstu krātuvē. Gatavs:

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

Funkcija saraksta atjaunināšanai krātuvē būs šāda (mēs ievietosim tajā produktus ar atslēgu products), novietosim to pēc funkcijas createProduct:

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