Thêm dữ liệu vào kho lưu trữ trong React Router

Trong bài học này chúng ta sẽ thực hiện việc thêm một sản phẩm vào kho lưu trữ. Trước tiên chúng ta cần một hàm createProduct để tạo sản phẩm, hãy thêm nó vào forStorage.js sau hàm getProducts:

forStorage.jsexport async function createProduct() {}

Đầu tiên lại thêm someNetwork:

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

Tiếp theo chúng ta sẽ cần một id duy nhất cho mỗi sản phẩm, bạn đã gặp điều này trong giáo trình React rồi. Hãy sử dụng thư viện nanoid cho việc này. Nhập lệnh sau vào terminal:

terminalnpm install --save nanoid

Import thư viện vào forStorage.js:

forStorage.jsimport { nanoid } from 'nanoid'

Hãy để id của chúng ta có 6 ký tự:

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

Ban đầu khi tạo sản phẩm, trong đối tượng của chúng ta chỉ có id. Hãy gọi getProducts, thêm sản phẩm đã tạo và cập nhật danh sách sản phẩm của chúng ta trong kho lưu trữ. Xong:

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

Hàm để cập nhật danh sách trong kho lưu trữ sẽ như sau (chúng ta sẽ đưa vào đó các sản phẩm với khóa products), hãy đặt nó sau hàm createProduct:

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