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