Portanto, armazenar é ótimo, buscar também seria bom e, no final, quero ter certeza de que, por
exemplo, quando visitarmos a tela de visão geral de
produtos, simplesmente chegaremos ao servidor e obteremos todos os produtos a partir daí, para que
nessa tela ,
sempre que o visitamos, carregamos os produtos mais recentes.
Agora, para isso, precisamos enviar uma solicitação HTTP a partir
daí e, no final, o que eu quero fazer é enviar uma nova ação Redux que chegue ao servidor,
obtenha meus produtos de lá e defina os produtos na minha loja. Então, eu preciso de uma ação totalmente
nova aqui, definir produtos, o que antes não era necessário, porque trabalhamos apenas com produtos fictícios, mas
agora não é mais o caso, então os produtos definidos devem ser despachados agora e precisarei de
um novo criador de ação que nomeei buscar produtos. Por isso, não tenho identificador, porque nunca enviarei isso como uma ação
que deve alcançar o redutor. Em vez disso, esse
será apenas o meu criador de ações com o código assíncrono com a solicitação HTTP.
Ele não precisará de argumentos, mas, graças ao Redux Thunk, ele retorna uma função que obtém essa função de despacho como argumento
e, no final, eu quero despachar um objeto de ação
em que o tipo é definido como produtos e para onde desejo encaminhar meus argumentos. produtos, mas é claro que isso não deve
ser uma matriz vazia, mas os produtos que recebo da minha API. Portanto, podemos copiar esse código aqui, incluindo
a parte de envio assíncrono aqui, até onde obtemos os dados de resposta, copiar isso de criar produto
e substituir essa parte
aqui por ele e agora o que fazemos é enviamos uma solicitação para o mesmo URL
de antes, o que faz sentido, porque é onde os
produtos são armazenados.
No entanto, agora eu quero definir uma solicitação get e esse é realmente o padrão
quando usamos a busca, portanto, não precisamos definir isso. Para uma solicitação de obtenção, você também não precisa definir
nenhum
cabeçalho e não pode definir um corpo; portanto, aqui, podemos nos livrar completamente desse segundo argumento
na busca, apenas enviamos uma solicitação de busca como esta.
Agora, a resposta recuperará nossos dados, mas agora há uma característica importante sobre o formato
desses dados e é melhor que simplesmente o vejamos.
Então, deixe-me console registrar os dados da resposta aqui e comentar isso por enquanto ou podemos deixá-lo lá, não faz mal,
não faz nada
útil, não estamos lidando com isso no redutor
ainda, mas vamos registrar isso e agora vamos para a tela de visão geral de produtos
e certifique-se de que enviamos essa ação de busca de produtos. Agora, felizmente, já tenho acesso à função
de despacho do Redux na visão geral dos produtos, então
agora só preciso adicionar o efeito use para poder dispará-lo sempre que esse componente carregar.
Então, aqui, eu posso adicionar efeito de uso e, na minha função, aqui, eu posso chamar despacho e agora estender a
mão para minhas ações de produtos que, portanto,
preciso importar como ações de produtos de ações de loja, como este, que devem ser ações e agora usar as ações de produtos aqui para acionar minha ação de busca
de produtos que, no final, fará essa solicitação HTTP e esse efeito deve ser executado
sempre que meu componente for carregado. Então, eu posso adicionar uma matriz vazia e, na verdade, adicionar minha
única dependência que tenho que é
despachada, aqui é a única dependência que definimos dentro do nosso componente, para que isso nunca seja executado novamente.
O único momento em que ele será executado é quando esse componente for carregado e é exatamente
o que deve ser o
caso, sempre que eu visitar a tela, desejo disparar esse efeito aqui.
Então, se eu agora salvar isso, vamos salvar isso e agora, à medida que
isso for carregado, veja aqui no log, foi o que aconteceu aqui no Android e no iOS, e é por isso
que vejo isso duas vezes.
Foi isso que voltei no
final, esse objeto foi retornado pelo Firebase.
É um objeto com todos os meus produtos e só tenho um, e é por isso que só vejo um aqui e
cada objeto corresponde ao seu ID exclusivo, mas isso
é importante.
Não voltamos ao array, retornamos um objeto com IDs únicos como chaves e os valores para
essas chaves são meus dados de objeto e precisamos apenas saber isso para manipulá-lo corretamente.
Então, de volta à
nossa ação, é assim que os dados de
resposta se parecem, é claro que no meu aplicativo eu trabalho com uma matriz, então preciso transformar isso.
Portanto, meus produtos carregados ou como você quiser chamar isso aqui devem ser
uma matriz vazia e agora podemos percorrer esse objeto para mapear os dados
do objeto, os produtos do objeto para os produtos da matriz.
É relativamente simples de fazer, podemos adicionar um loop for / in aqui com nossa chave, onde
analisamos todos os dados de resposta que buscamos aqui no final e, em seguida, adiciono cada produto aos meus produtos carregados com push, para que
isso A matriz cresce com o tempo e o que eu
adiciono aqui no final é apenas um produto novo, usando o modelo de produto que você precisa importar,
portanto,
verifique se você tem essa importação aqui apontando para a pasta de modelos e para
o arquivo do produto. crie
um novo produto aqui onde meu ID é essa chave, porque é esse ID exclusivo que temos nesse objeto para o
qual estamos fazendo loop, então aquela coisa de usuário, que ainda é U1, dados fictícios porque não temos dados de
usuário envolvidos aqui e depois temos que olhar para o objeto que retornamos do Firebase para obter o título e assim
por diante.
Portanto, aqui, nosso título para este novo produto que estamos criando é simplesmente resData para a chave fornecida. título e o mesmo, é claro,
aqui para
o imageUrl, então. imagem URL. Para a
descrição e, claro, também para o preço, assim. Portanto, isso adiciona tudo aos produtos carregados e agora os produtos carregados
serão uma matriz preenchida que eu posso adicionar aqui à ação despachada, à ação
de produtos definidos.
Portanto, a única coisa que falta é que agora vamos para o redutor e lá podemos lidar com produtos definidos, talvez aqui como
o primeiro caso, mas é claro que a posição não importa. Adicione produtos definidos aqui e, para
isso, verifique se você está importando-o do seu arquivo de ações e depois lá, é
algo muito trivial que estamos prestes a fazer. No final, só preciso retornar um
novo estado em que os produtos disponíveis sejam iguais à ação. produtos, para os produtos que derivamos aqui no meu criador de
ações que adiciono à minha ação despachada. E para o produto do
usuário, é bem parecido, aí está a ação. produtos, filtrados apenas para todos os produtos que possuem meu ID de usuário, assim
e no momento devido ao meu código fictício aqui onde codifico meu código de usuário, isso obviamente significa
que todos os produtos carregados são tratados como meus produtos.
Isso é algo que mudaremos depois que adicionarmos autenticação. Então, com isso, agora, se isso for
recarregado, você verá que começamos com os dados fictícios, mas isso é
imediatamente substituído pelos dados carregados. Portanto, o carregamento de dados funciona
bem, podemos trabalhar com isso da mesma maneira que podemos com nossos próprios dados aqui.
É claro que não estamos armazenando pedidos no servidor e nada disso, mas somos capazes de carregar
nossos dados que armazenamos anteriormente no servidor.