การดึงข้อมูลจากแหล่งเก็บข้อมูลใน React Router

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

ในบทเรียนนี้ เราจะเริ่มจากการจัดการกับการดึงข้อมูลจากแหล่งเก็บข้อมูล สำหรับการเก็บข้อมูลในเครื่องเราจะใช้ localForage (คุณสามารถอ่านเกี่ยวกับการใช้งานและข้อดีได้ใน เอกสารประกอบ) - ซึ่งเป็นอะนาล็อกของ LocalStorage ที่เบราว์เซอร์สมัยใหม่ทั้งหมดรองรับ โดยพื้นฐานแล้วนี่คือการรวมกันของเทคโนโลยีการจัดเก็บข้อมูลหลายอย่าง ด้วยการใช้งานที่ค่อนข้างง่าย มันช่วยให้สามารถเก็บข้อมูลปริมาณมากได้ และยังเป็นข้อมูลประเภทต่าง ๆ รวมถึงรูปภาพด้วย มาลองติดตั้งมันในโปรเจกต์ของเรากัน พิมพ์ในเทอร์มินัล:

npm i localforage

มาเริ่มต้นแอปพลิเคชันของเราใหม่ ในโฟลเดอร์ src เราจะสร้างไฟล์ forStorage.js ซึ่งจะมีฟังก์ชันสำหรับทำงานกับแหล่งเก็บข้อมูล

เอาล่ะ เริ่มจากฟังก์ชันโหลดสินค้าจากแหล่งเก็บข้อมูลกัน เพิ่มการนำเข้าไลบรารีใน forStorage.js และเขียนฟังก์ชัน getProducts เพื่อรับสินค้า:

import localforage from 'localforage';

export async function getProducts() {
	await someNetwork();
	let products = await localforage.getItem('products');
	if (!products) products = [];
	return products;
}

ด้านล่างหลังจากโค้ดฟังก์ชัน เราจะเพิ่มโค้ดสำหรับ someNetwork ด้วย เพื่อจำลองความล่าช้าของเครือข่าย (สูงสุด 0.7 วินาที) สำหรับการทำงานปกติของฟังก์ชัน หากสินค้าของเรา "ถูกแคช" ไว้ ฟังก์ชันสำหรับทำงานกับแหล่งเก็บข้อมูลจะไม่มีความล่าช้า แต่หากไม่ถูกแคช ก็จะมีความล่าช้า คุณจะได้เห็นการทำงานนี้ในภายหลัง:

let someCache = {};

async function someNetwork(key) {
	if (!key) {
		someCache = {};
	}

	if (someCache[key]) {
		return;
	}

	someCache[key] = true;

	return new Promise((res) => {
		setTimeout(res, Math.random() * 700);
	});
}

ใช้แอปพลิเคชันที่คุณสร้างขึ้นในงานมอบหมายของบทเรียนที่ผ่านมา ติดตั้ง localForage ในแอปพลิเคชันของคุณ

ใช้เนื้อหาจากบทเรียน สร้างไฟล์ forStorage.js และเขียนฟังก์ชัน getStudents ในนั้น เพื่อรับข้อมูลนักเรียนจากแหล่งเก็บข้อมูล