Obtendo dados do armazenamento no React Router

Você pode ver que nosso aplicativo ainda é estático. Nesta e nas próximas lições, vamos começar a torná-lo dinâmico. Já nas próximas lições, poderemos adicionar produtos à lista usando React Router.

Nesta lição, para começar, vamos lidar com a obtenção de dados do armazenamento. Para o armazenamento local de dados, usaremos o localForage (você pode ler sobre seu uso e vantagens na documentação) - um análogo do LocalStorage, que é suportado por todos os navegadores modernos. Na verdade, é uma combinação de várias tecnologias de armazenamento. Com um uso relativamente fácil, permite armazenar grandes volumes de dados, e de diferentes tipos, incluindo imagens. Vamos instalá-lo em nosso projeto. Digite no terminal:

npm i localforage

Vamos reiniciar nosso aplicativo. Na pasta src, vamos criar o arquivo forStorage.js, que conterá funções para trabalhar com o armazenamento.

Então, vamos começar com a função de carregar produtos do armazenamento. Vamos adicionar em forStorage.js a importação da biblioteca e escrever a função getProducts para obter os produtos:

import localforage from 'localforage';

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

Abaixo, após o código da função, também adicionaremos o código para someNetwork, simulando atrasos de rede (até 0,7 segundos) para o funcionamento adequado das funções. Se nosso produto estiver "em cache", não haverá atraso nas funções de trabalho com o armazenamento; se não estiver, haverá um atraso, você verá como isso funciona mais adiante:

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

Pegue o aplicativo criado por você nas tarefas das lições anteriores. Instale o localForage no aplicativo.

Usando os materiais da lição, crie o arquivo forStorage.js e escreva nele a função getStudents para obter os dados dos estudantes do armazenamento.