การเพิ่มข้อมูลลงใน storage ใน React Router

ในบทเรียนนี้เราจะทำการเพิ่มผลิตภัณฑ์ลงใน storage ก่อนอื่นเราต้องการฟังก์ชัน createProduct สำหรับสร้างผลิตภัณฑ์ เพิ่มมันเข้าไปใน forStorage.js หลังฟังก์ชัน getProducts:

forStorage.jsexport async function createProduct() {}

เริ่มต้นด้วยการเพิ่ม someNetwork อีกครั้ง:

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

จากนั้นเราจะต้องมี id ที่ไม่ซ้ำกัน สำหรับแต่ละผลิตภัณฑ์ คุณเคยพบเจอสิ่งนี้แล้วในบทเรียน React เราจะใช้ไลบรารี nanoid สำหรับการนี้ ในเทอร์มินัลให้ป้อนคำสั่งต่อไปนี้:

terminalnpm install --save nanoid

นำเข้าไลบรารีลงใน forStorage.js:

forStorage.jsimport { nanoid } from 'nanoid'

ให้ id ของเรามี 6 อักขระ:

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

ในตอนเริ่มต้นเมื่อสร้างผลิตภัณฑ์ ในออบเจ็กต์ของเราจะมีแค่ id เท่านั้น เรียกใช้ getProducts เพิ่มผลิตภัณฑ์ที่สร้างขึ้นและอัปเดตรายการผลิตภัณฑ์ของเราใน storage เสร็จแล้ว:

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

ฟังก์ชันสำหรับอัปเดตรายการใน storage จะเป็นดังนี้ (เราจะใส่ผลิตภัณฑ์ลงไปภายใต้คีย์ products) วางมันหลังฟังก์ชัน createProduct:

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