Menambah Data ke Stor dalam React Router

Dalam pelajaran ini, kita akan menguruskan penambahan produk ke dalam stor. Untuk bermula, kita memerlukan fungsi createProduct untuk mencipta produk, mari tambahkannya dalam forStorage.js selepas fungsi getProducts:

forStorage.jsexport async function createProduct() {}

Pertama sekali, tambahkan someNetwork sekali lagi:

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

Seterusnya, kita akan memerlukan id unik untuk setiap produk, anda telah bertemu dengan ini dalam tutorial React. Mari gunakan pustaka nanoid untuk tujuan ini. Taipkan perintah berikut dalam terminal:

terminalnpm install --save nanoid

Import pustaka ke dalam forStorage.js:

forStorage.jsimport { nanoid } from 'nanoid'

Mari kita tetapkan id kepada 6 aksara:

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

Pada asalnya semasa mencipta produk, kita hanya akan mempunyai id dalam objek. Panggil getProducts, tambahkan produk yang dijana dan kemas kini senarai produk kita dalam stor. Selesai:

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

Fungsi untuk mengemas kini senarai dalam stor adalah seperti berikut (kita akan memasukkannya ke dalam produk di bawah kunci products), letakkannya selepas fungsi createProduct:

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