การอัปเดตข้อมูลตามพารามิเตอร์ URL ในสโตร์ใน React Router

ในบทเรียนที่แล้ว เราได้เพิ่มเส้นทางอีกหนึ่งเส้นทางและหน้าฟอร์มสำหรับแก้ไขข้อมูล สิ่งที่เหลือคือการบันทึกข้อมูลที่กรอกลงในฟอร์มของเรา

เริ่มต้น เรามาเพิ่มฟังก์ชันสำหรับอัปเดตข้อมูลผลิตภัณฑ์ updateProduct ในไฟล์ forStorage.js เราจำเป็นต้องส่ง id ของผลิตภัณฑ์และข้อมูลที่เปลี่ยนแปลงเข้าไปในฟังก์ชันนี้:

forStorage.jsexport async function updateProduct(id, updates) {
  await someNetwork();
}

จากนั้น จากสโตร์โดยใช้คีย์ 'products' เราจะดึงรายการผลิตภัณฑ์และค้นหาผลิตภัณฑ์ที่เรากำลังแก้ไขโดยใช้ id ของมัน หากไม่พบ จะโยนข้อผิดพลาด:

forStorage.jsexport async function updateProduct(id, updates) {
  await someNetwork();
  let products = await localforage.getItem('products');
  let product = products.find((product) => product.id === id);
  if (!product) throw new Error('No product found for this', id);        
}

จากนั้น สิ่งที่เหลือคือนำการเปลี่ยนแปลงไปใช้กับผลิตภัณฑ์ที่พบ และเขียนรายการที่อัปเดตแล้วลงในสโตร์ใหม่โดยใช้ฟังก์ชัน setProducts ของเรา:

forStorage.jsexport async function updateProduct(id, updates) {
  await someNetwork();
  let products = await localforage.getItem('products');
  let product = products.find((product) => product.id === id);
  if (!product) throw new Error('No product found for this', id);
  Object.assign(product, updates);
  await setProducts(products);
  return product;
}