Adatok lekérése a tárolóból a React Routerban

Láthatja, hogy az alkalmazásunk egyelőre statikus. Ebben és a következő leckékben elkezdjük életre keltani. A következő leckékben már tudunk termékeket hozzáadni a listához a React Router segítségével.

Ebben a leckében kezdetként foglalkozunk az adatok tárolóból való lekérésével. Az adatok helyi tárolásához a localForage tárolót fogjuk használni (használatáról és előnyeiről olvashat a dokumentációban) - ez a LocalStorage analógja, amit minden modern böngésző támogat. Lényegében több tárolótechnológia egyesítése. Viszonylag könnyű használat mellett lehetővé teszi nagy mennyiségű adat tárolását, ráadásul különböző típusúakat, beleértve a képeket is. Telepítsük a projektünkbe. Gépelje be a terminálba:

terminalnpm i localforage

Indítsuk újra az alkalmazásunkat. A src mappában létrehozunk egy forStorage.js fájlt, amely a tárolóval való munkavégzés függvényeit fogja tartalmazni.

Szóval, kezdjük a termékek tárolóból való betöltésének függvényével. Adjuk hozzá a forStorage.js fájlhoz a könyvtár importját és írjuk meg a getProducts függvényt a termékek lekéréséhez:

forStorage.jsimport localforage from 'localforage';

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

Alul, a függvény kódja után szintén hozzáadunk kódot a someNetwork számára, szimulálva a hálózati késleltetést (akár 0.7 másodpercig) a függvények megfelelő működése érdekében. Ha a termékünk "gyorsítótárazva van", akkor a tárolóval működő függvényekben nem lesz késleltetés, ha nem, akkor lesz késleltetés, a későbbiekben látni fogja, hogyan működik ez:

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