Tietojen lisääminen tallennustilaan React Routerissa

Tässä oppitunnissa käsittelemme tuotteen lisäämistä tallennustilaan. Aluksi tarvitsemme funktion createProduct tuotteen luomiseen, lisätään se tiedostoon forStorage.js funktion getProducts jälkeen:

forStorage.jsexport async function createProduct() {}

Ensin lisätään taas someNetwork:

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

Seuraavaksi tarvitsemme yksilöllisen id:n jokaiselle tuotteelle, olet tavannut tämän aiemmin React-oppaassa. Käytetään tähän nanoid-kirjastoa. Syötetään terminaaliin seuraava komento:

terminalnpm install --save nanoid

Tuodaan kirjasto tiedostoon forStorage.js:

forStorage.jsimport { nanoid } from 'nanoid'

Olkoon id:t 6 merkkiä pitkiä:

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

Aluksi tuotetta luodessa objektissa on vain id. Kutsutaan getProducts, lisätään luotu tuote ja päivitetään tuotelistamme tallennustilassa. Valmista:

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

Funktio listan päivittämiseksi tallennustilassa on seuraava (talletamme sinne tuotteet avaimella products), sijoitetaan se funktion createProduct jälkeen:

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