Pobieranie danych z magazynu w React Router

Widzisz, że na razie nasza aplikacja jest statyczna. W tej i kolejnych lekcjach zaczniemy ją ożywiać. Już w najbliższych lekcjach będziemy mogli dodawać produkty do listy za pomocą React Router.

W tej lekcji, na początek, zajmiemy się pobieraniem danych z magazynu. Do lokalnego przechowywania danych będziemy używać magazynu localForage (możesz przeczytać o jego użyciu i zaletach w dokumentacji) - odpowiednik LocalStorage, który obsługują wszystkie nowoczesne przeglądarki. Faktycznie jest to połączenie kilku technologii magazynów. Przy stosunkowo łatwym użyciu, pozwala przechowywać duże ilości danych, i to różnych typów, w tym także obrazy. Zainstalujmy go w naszym projekcie. Wpisz w terminalu:

terminalnpm i localforage

Uruchommy ponownie naszą aplikację. W folderze src utworzymy plik forStorage.js, w którym będą funkcje do pracy z magazynem.

A więc, zaczniemy od funkcji ładowania produktów z magazynu. Dodajmy w forStorage.js import biblioteki i napiszmy funkcję getProducts do pobierania produktów:

forStorage.jsimport localforage from 'localforage';

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

Poniżej po kodzie funkcji dodamy również kod dla someNetwork, symulując opóźnienia sieci (do 0.7 sekundy) dla normalnej pracy funkcji. Jeśli nasz produkt jest "zbuforowany", to w funkcjach do pracy z magazynem nie będzie opóźnienia, jeśli nie, to będzie opóźnienie, zobaczysz dalej, jak to działa:

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