Атрыманне дадзеных з сховішча ў React Router

Вы бачыце, што пакуль наша прыкладанне статычнае. У гэтым і наступных уроках мы пачнем яго ажыўляць. Ужо на бліжэйшых уроках мы зможам дадаваць прадукты ў спіс з дапамогай React Router.

У гэтым уроку мы, для пачатку, разбярэмся з атрыманнем дадзеных з сховішча. Для лакальнага захоўвання дадзеных мы будзем выкарыстоўваць сховішча localForage (вы можаце пачытаць пра яго выкарыстанне і перавагі ў дакументацыі) - аналаг LocalStorage, які падтрымліваюць усе сучасныя браўзэры. Фактычна гэта аб'яднанне некалькіх тэхналогій сховішчаў. Пры адносна лёгкім выкарыстанні, яно дазваляе захоўваць вялікія аб'ёмы дадзеных, прычым розных тыпаў, у тым ліку і выявы. Давайте ўсталюем яго ў наш праект. Убярыце ў тэрмінале:

terminalnpm i localforage

Перазапусцім наша прыкладанне. У тэчцы src мы створым файл forStorage.js, у якім будуць функцыі для работы з сховішчам.

Такім чынам, пачнем з функцыі загрузкі прадуктаў з сховішча. Дадамо ў forStorage.js імпорт бібліятэкі і напішам функцыю getProducts для атрымання прадуктаў:

forStorage.jsimport localforage from 'localforage';

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

Ніжэй пасля кода функцыі мы таксама дадамо код для someNetwork, імітуючы затрымкі сеткі (да 0.7 секунды) для нармальнай работы функцый. Калі наш прадукт "закэшаваны", то ў функцыях для работы з сховішчам затрымкі не будзе, калі не, то будзе затрымка, вы ўбачыце ў далейшым, як гэта працуе:

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