การโหลดข้อมูลหน้าจาก URL Parameters จาก Store ใน React Router

ตอนนี้เราสามารถเพิ่มสินค้าลงในแอปพลิเคชันของเราได้แล้ว เริ่มต้นแอปพลิเคชัน และเพิ่ม สินค้าสองสามชิ้นโดยใช้ปุ่ม หากตอนนี้เรา คลิกที่ตัวสินค้าในรายการ เราจะเห็นว่าแต่ละสินค้ายังคงมี หน้าแสดงผลแบบคงที่เหมือนกัน ซึ่งเราจะ มาทำงานกับหน้านี้ในบทเรียนนี้และบทเรียนต่อๆ ไป

นอกจากนี้ยังจำเป็นต้องสังเกตอีกหนึ่งประเด็น โดยทั่วไป URL ทั้งหมดแบ่งออกเป็น segments - นี่คือ ส่วนต่างๆ ของ URL ระหว่างเครื่องหมาย / คุณ อาจจำได้ว่าเมื่อสร้าง แอปพลิเคชันนี้ เราได้ระบุเส้นทาง 'products/:productId' ตรงนี้ :productId เรียกว่า dynamic segment ด้านหน้าของมัน จะมีเครื่องหมาย ':' ค่าใน segment นี้จะเปลี่ยนแปลง และมันคือค่าเหล่านี้ที่เข้าสู่ URL parameters (URL Params หรือ params) ซึ่งจะถูกส่งผ่านไปยัง loader ภายใต้คีย์ที่กำหนด ในกรณีของเรา นี่จะเป็น params.productId

ลองดูที่แถบที่อยู่ในเบราว์เซอร์ เมื่อคุณคลิกที่สินค้าในรายการ คุณจะเห็นว่า segment สุดท้ายในแถบที่อยู่เปลี่ยนแปลง ค่าเหล่านี้เองที่จะเข้าสู่ loader และสินค้าของเราใน store มี id ที่สร้างขึ้นอย่างไม่ซ้ำกัน ดังนั้น เราจะสามารถโหลดสินค้าที่ เราต้องการได้

และตอนนี้ หลังจากพูดนอกเรื่องเล็กน้อย ให้เรา มาทำงานกับหน้าสินค้าสักที โดยเฉพาะ - กับการโหลดข้อมูลจาก store

เรามาทำความคุ้นเคยกับกระบวนการเดิมอีกครั้ง อันดับแรกใน forStorage.js ให้เพิ่มฟังก์ชัน getProduct เพื่อรับข้อมูล ของสินค้าเฉพาะจาก store ตาม id ที่นี่เราจะส่งผ่าน id ไปยังฟังก์ชัน และตามนั้น หากสินค้าของเรา "ถูกแคช" แล้ว มันจะถูกแสดงผลโดยไม่มีความล่าช้า:

export async function getProduct(id) {
	await someNetwork(`product:${id}`);
}

ต่อไป เราจำเป็นต้องรับอาร์เรย์ของสินค้า และค้นหาสินค้าของเราจากนั้น ตาม id ที่ส่งมา:

export async function getProduct(id) {
	await someNetwork(`product:${id}`);
	let products = await localforage.getItem('products');
	let product = products.find((product) => product.id === id);
	return product ?? null;
}

ใช้แอปพลิเคชันที่คุณสร้างขึ้นใน แบบฝึกหัดของบทเรียนที่ผ่านมา โดยใช้ เนื้อหาจากบทเรียน สร้าง ฟังก์ชัน getStudent ในไฟล์ forStorage.js เพื่อรับ ข้อมูลของนักเรียนตาม id