Duomenų pridėjimas į saugyklą React Router

Šioje pamokoje mes užsiimsime produkto pridėjimu į saugyklą. Pirmiausia mums reikia funkcijos createProduct produktui sukurti, pridėkime ją į forStorage.js po funkcijos getProducts:

forStorage.jsexport async function createProduct() {}

Pirmiausia vėl pridedame someNetwork:

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

O toliau mums reikės unikalių id kiekvienam produktui, jūs jau susidūrėte su tuo React vadovėlyje. Naudokimės tam biblioteka nanoid. Įveskime terminale šią komandą:

terminalnpm install --save nanoid

Importuokime į forStorage.js biblioteką:

forStorage.jsimport { nanoid } from 'nanoid'

Tegul mes turime id po 6 simbolius:

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

Iš pradžių, kurdami produktą, mes turėsime objekte tik id. Iškvieskime getProducts, pridėkime sugeneruotą produktą ir atnaujinkime mūsų produktų sąrašą saugykloje. Paruošta:

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 sąrašui atnaujinti saugykloje bus tokia (mes į ją įrašysime produktus pagal raktažodį products), patalpinkime ją po funkcijos createProduct:

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