Преузимање података из складишта у 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);
  });
}