Извличане на данни от хранилище в 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);
  });
}