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:

terminalnpm 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:

forStorage.jsimport 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:

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