Pridobivanje podatkov iz shrambe v React Router

Vidite, da je naša aplikacija za zdaj statična. V tej in naslednjih lekcijah jo bomo začeli oživljati. Že v bližnjih lekcijah bomo lahko dodajali produkte v seznam s pomočjo React Router.

V tej lekciji se bomo za začetek ukvarjali s pridobivanjem podatkov iz shrambe. Za lokalno shranjevanje podatkov bomo uporabili shrambo localForage (o njeni uporabi in prednostih lahko preberete v dokumentaciji) - analog LocalStorage, ki ga podpirajo vsi sodobni brskalniki. Dejansko je to združitev več tehnologij shramb. Ob razmeroma enostavni uporabi omogoča shranjevanje velikih količin podatkov, in to različnih tipov, vključno s slikami. Namestimo ga v naš projekt. Vtipkajte v terminalu:

terminalnpm i localforage

Ponovno zaženimo našo aplikacijo. V mapi src bomo ustvarili datoteko forStorage.js, v kateri bodo funkcije za delo s shrambo.

Torej, začnimo s funkcijo za nalaganje produktov iz shrambe. Dodajmo v forStorage.js uvoz knjižnice in napišimo funkcijo getProducts za pridobivanje produktov:

forStorage.jsimport localforage from 'localforage';

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

Spodaj za kodo funkcije bomo prav tako dodali kodo za someNetwork, s čimer bomo simulirali zamude omrežja (do 0,7 sekunde) za normalno delovanje funkcij. Če je naš produkt "predpomniljen", potem v funkcijah za delo s shrambo ne bo zamude, če ni, potem bo zamuda, kar boste videli v nadaljevanju, kako to deluje:

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