Data byvoeging tot die stoor in React Router

In hierdie les sal ons die byvoeging van 'n produk tot die stoor hanteer. Om te begin het ons 'n funksie createProduct nodig vir die skepping van 'n produk, laat ons dit byvoeg in forStorage.js na die funksie getProducts:

forStorage.jsexport async function createProduct() {}

Voeg eers weer someNetwork by:

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

Maar dan sal ons 'n unieke id vir elke produk nodig hê, jy het dit reeds teengekom in die React-handleiding. Laat ons die nanoid-biblioteek hiervoor gebruik. Tik die volgende opdrag in die terminal:

terminalnpm install --save nanoid

Voer die biblioteek in forStorage.js in:

forStorage.jsimport { nanoid } from 'nanoid'

Laat ons id van 6 karakters hê:

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

Aanvanklik, wanneer 'n produk geskep word, sal ons slegs id in die objek hê. Roep getProducts op, voeg die gegenereerde produk by en werk ons lys produkte in die stoor op. Klaar:

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

Die funksie om die lys in die stoor op te dateer sal die volgende wees (ons sal produkte daarin plaas onder die sleutel products), plaas dit na die funksie createProduct:

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