Carregamento de dados da página a partir de parâmetros URL do armazenamento no React Router
Agora podemos adicionar produtos ao nosso aplicativo. Inicie o aplicativo, adicione alguns produtos com o botão. Se agora clicarmos nos próprios produtos na lista, veremos que cada produto ainda tem a mesma página estática, que abordaremos nesta e nas próximas lições.
Também é importante observar outro ponto.
De modo geral, todo URL é dividido em segmentos - estas são
as partes do URL entre os caracteres /. Você
provavelmente se lembra que ao criar este
aplicativo, especificamos o caminho
'products/:productId', pois bem,
:productId é chamado aqui de
segmento dinâmico. Antes dele
é colocado o caractere ':'. Os valores neste
segmento mudarão,
são eles que vão para os parâmetros URL
(URL Params ou params), que são passados
ao carregador sob uma chave específica, no nosso
caso será params.productId.
Dê uma olhada na barra de endereços do navegador
quando clica nos produtos na lista. Você verá
que o último segmento na barra de endereços muda,
são exatamente esses valores que serão passados ao carregador.
E nossos produtos no armazenamento têm um
id único gerado por nós, assim
será carregado o produto
que precisamos.
E agora, após uma pequena pausa, vamos finalmente trabalhar na página do produto, mais especificamente - com o carregamento de dados do armazenamento.
Vamos repetir o processo familiar. Primeiro, em
forStorage.js adicionaremos a função
getProduct para obter os dados
de um produto específico do armazenamento por
id. Aqui já passaremos
o id para a função e, consequentemente,
se o produto estiver "em cache", será
exibido sem atraso:
export async function getProduct(id) {
await someNetwork(`product:${id}`);
}
Em seguida, precisamos obter a matriz de produtos
e entre eles encontrar nosso produto pelo
id passado:
export async function getProduct(id) {
await someNetwork(`product:${id}`);
let products = await localforage.getItem('products');
let product = products.find((product) => product.id === id);
return product ?? null;
}
Pegue o aplicativo criado por você nas
tarefas das lições anteriores. Usando os
materiais da lição, crie em
forStorage.js a função
getStudent para obter
dados do estudante por id.
