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

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

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

terminalnpm i localforage

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

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

forStorage.jsimport localforage from 'localforage';

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

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

forStorage.jslet someCache = {};

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

  if (someCache[key]) {
    return;
  }

  someCache[key] = true;

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