Obținerea datelor din stocare în React Router

Vedeți că deocamdată aplicația noastră este statică. În această și în lecțiile următoare vom începe să o animăm. Deja în lecțiile viitoare vom putea adăuga produse în listă cu ajutorul React Router.

În această lecție, pentru început, ne vom ocupa de obținerea datelor din stocare. Pentru stocarea locală a datelor vom folosi stocarea localForage (puteți citi despre utilizarea și avantajele sale în documentație) - un analog al LocalStorage, care este suportat de toate browserele moderne. De fapt, este o unificare a mai multor tehnologii de stocare. Cu o utilizare relativ ușoară, permite stocarea unor volume mari de date, și de tipuri diferite, inclusiv imagini. Să îl instalăm în proiectul nostru. Tastați în terminal:

terminalnpm i localforage

Să repornim aplicația noastră. În folderul src vom crea fișierul forStorage.js, în care vor fi funcții pentru lucrul cu stocarea.

Așadar, să începem cu funcția de încărcare a produselor din stocare. Să adăugăm în forStorage.js importul bibliotecii și să scriem funcția getProducts pentru obținerea produselor:

forStorage.jsimport localforage from 'localforage';

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

Mai jos după codul funcției vom adăuga și codul pentru someNetwork, simulând întârzieri de rețea (până la 0,7 secunde) pentru funcționarea normală a funcțiilor. Dacă produsul nostru este "cache-uit", atunci în funcțiile pentru lucrul cu stocarea nu va exista întârziere, dacă nu, atunci va exista întârziere, veți vedea în continuare, cum funcționează:

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