Получение данных из хранилища в React Router
Вы видите, что пока наше приложение статично. В этом и последующих уроках мы начнем его оживлять. Уже на ближайших уроках мы сможем добавлять продукты в список с помощью React Router.
В этом уроке мы, для начала, разберемся с получением данных из хранилища. Для локального хранения данных мы с вами будем использовать хранилище localForage (вы можете почитать о его использовании и преимуществах в статье или доке) - аналог LocalStorage, который поддерживают все современные браузеры. Фактически это объединение нескольких технологий хранилищ. При относительно легком использовании, оно позволяет хранить большие объемы данных, причем разных типов, в том числе и картинки. Давайте установим его в наш проект. Вбейте в терминале:
npm i localforage
Перезапустим наше приложение. В папке
src мы создадим файл forStorage.js,
в котором будут функции для работы с хранилищем.
Итак, начнем с функции загрузки продуктов
из хранилища. Добавим в forStorage.js
импорт библиотеки и напишем функцию
getProducts для получения продуктов:
import localforage from 'localforage';
export async function getProducts() {
await someNetwork();
let products = await localforage.getItem('products');
if (!products) products = [];
return products;
}
Ниже после кода функции мы также добавим
код для someNetwork, имитируя
задержки сети (до 0.7 секунды) для
нормальной работы функций. Если наш продукт
"закэширован", то функциях для работы с
хранилищем задержки не будет, если нет,
то будет задержка, вы увидите в дальнейшем,
как это работает:
let someCache = {};
async function someNetwork(key) {
if (!key) {
someCache = {};
}
if (someCache[key]) {
return;
}
someCache[key] = true;
return new Promise((res) => {
setTimeout(res, Math.random() * 700);
});
Возьмите приложение, созданное вами в заданиях к прошлым урокам. Установите в приложении хранилище localForage.
Пользуясь материалами урока, создайте
файл forStorage.js и напишите в нем
функцию getStudents для получения
данных студентов из хранилища.