Dobijanje podataka iz skladišta u React Router-u

Vidite da je naša aplikacija za sada statična. U ovoj i narednim lekcijama ćemo je početi oživljavati. Već u skorim lekcijama moći ćemo dodavati proizvode u listu pomoću React Router-a.

U ovoj lekciji ćemo se, za početak, pozabaviti dobijanjem podataka iz skladišta. Za lokalno skladištenje podataka koristićemo skladište localForage (možete pročitati o njegovoj upotrebi i prednostima u dokumentaciji) - analog LocalStorage-a, koji podržavaju svi moderni brauzeri. U stvari, to je objedinjavanje nekoliko tehnologija skladišta. Uz relativno laku upotrebu, ono omogućava skladištenje velikih količina podataka, i to različitih tipova, uključujući i slike. Hajde da ga instaliramo u naš projekt. Ukucajte u terminalu:

terminalnpm i localforage

Ponovo pokrenimo našu aplikaciju. U folderu src kreiraćemo fajl forStorage.js, u kome će biti funkcije za rad sa skladištem.

Dakle, počnimo sa funkcijom za učitavanje proizvoda iz skladišta. Dodajmo u forStorage.js import biblioteke i napišimo funkciju getProducts za dobijanje proizvoda:

forStorage.jsimport localforage from 'localforage';

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

Ispod nakon koda funkcije takođe ćemo dodati kod za someNetwork, imitirajući kašnjenje mreže (do 0.7 sekundi) za normalan rad funkcija. Ako je naš proizvod "keširan", onda u funkcijama za rad sa skladištem neće biti kašnjenja, ako nije, biće kašnjenje, videćete kasnije kako to radi:

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