Menambahkan Data ke Penyimpanan di React Router

Dalam pelajaran ini kita akan menangani penambahan produk ke penyimpanan. Pertama-tama kita membutuhkan fungsi createProduct untuk membuat produk, mari tambahkan ke forStorage.js setelah fungsi getProducts:

forStorage.jsexport async function createProduct() {}

Pertama-tama tambahkan lagi someNetwork:

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

Selanjutnya kita akan membutuhkan id unik untuk setiap produk, Anda sudah pernah menemui ini dalam tutorial React. Mari gunakan library nanoid untuk ini. Ketikkan perintah berikut di terminal:

terminalnpm install --save nanoid

Impor library ke forStorage.js:

forStorage.jsimport { nanoid } from 'nanoid'

Mari kita buat id sepanjang 6 karakter:

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

Awalnya saat membuat produk, kita hanya akan memiliki id dalam objek. Panggil getProducts, tambahkan produk yang dihasilkan dan perbarui daftar produk kita di penyimpanan. 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 memperbarui daftar di penyimpanan akan seperti berikut (kita akan memasukkannya ke dalamnya produk dengan kunci products), tempatkan setelah fungsi createProduct:

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