Para garantir que eles carreguem, novamente
precisamos voltar ao criador da ação e adicionar uma nova ação no criador da ação de pedidos, com licença.
Um identificador necessário é definir pedidos, assim como tínhamos um para definir produtos para definir os pedidos carregados e, aqui,
tenho meu criador de ação de
pedidos de busca que não aceita argumentos, mas que retorna minha função de envio assíncrono aqui, graças a
Redux Thunk e por fim, despacho ou envio uma nova ação em que o tipo é definido como pedidos e onde tenho meus
pedidos carregados e, é claro, que não deve ser uma matriz vazia.
Em vez disso, podemos emprestar a lógica do criador da ação dos produtos, de buscar produtos lá. Podemos pegar toda essa lógica,
copiar tudo isso aqui e movê-la para o criador da ação de pedidos
e
executá-la antes de despacharmos aqui. Agora, é claro que precisamos ajustar isso, por exemplo, a solicitação precisa ser
enviada para pedidos / U1 e novamente será substituída posteriormente por um valor dinâmico,
pois agora é codificado para buscar os pedidos deste usuário. Deve ser uma solicitação de recebimento, eu quero verificar
isso, tudo bem.
Aqui obtive meus
dados de resposta, agora recebi meus pedidos carregados, que
parecem ser um nome mais
apropriado, ainda percorro todos os dados que obtive e quero definir meus pedidos carregados, mas agora
há uma diferença importante, Não crio aqui novos
produtos que adiciono a pedidos carregados; em vez disso, é claro que
preciso criar novos pedidos aqui e, para isso, é necessário
importar o pedido do modelo de pedido. Agora também vejo que falta uma cinta
encaracolada, agora antes de prosseguir com isso, preciso ter certeza de que também pego os
erros que possa estar recebendo e lá quero lançar o erro, basicamente repita-o, certifique-se ele chega ao meu componente e eu preciso de
mais uma chave
de fechamento, mas agora, de volta à nossa lógica, aqui onde eu crio novos
pedidos, aí o ID é a chave, assim como para os
produtos, os itens podem ser encontrados nos meus dados de resposta, porque basicamente, volte aqui, para que os dados da
resposta tenham uma chave de itens do cartão, por exemplo, que contém os itens do
meu cartão que eu preciso. Então, dados de resposta para a chave fornecida e lá,. cardItems, é aí que
encontro meus itens, porque é o que enviamos aqui no final para armazenar os itens do cartão, então
meu pedido que eu criar aqui, obviamente, também precisa
do valor total, recebo da chave resData e, se tivermos, uma olhada no Firebase,
é esse campo de valor total aqui e a data.
Bem, para isso, eu crio um novo objeto de data, mas eu o inicializo com a chave resData. encontro.
Agora precisamos criar um novo objeto de dados porque a chave resData. date é exatamente essa string de data aqui e
eu preciso de um objeto de data, não
de uma string de data, portanto, envolvemos, essa string envolve a criação do objeto de data aqui e, portanto, obtemos
um
objeto de dados e é essa a ordem que adiciono aqui
para pedidos carregados, fazemos isso para todos os pedidos que estamos buscando e, com isso, podemos despachar isso e
agora precisamos lidar com isso no redutor de pedidos.
Portanto, se eu lidar com pedidos definidos e, para isso, é claro que você precisará importar esse identificador de ação, a única coisa que preciso fazer é retornar um novo
objeto de estado em que pedidos sejam iguais à ação. pedidos e é tudo o
que precisamos fazer,
muito simples.
Agora, por que é tão simples assim?
Porque no criador da ação, fazemos todo o trabalho. Lá, mapeamos nossos pedidos e, em seguida, aqui, eu
apenas tenho a chave de pedidos em minha ação que
contém todos os pedidos mapeados, então é exatamente isso que preciso armazenar aqui.
Agora, a etapa restante é enviarmos os pedidos de busca aqui em nossa tela de pedidos. Então, vamos lá e vamos adicionar o efeito use novamente
para fazer isso e para despachar, também precisamos importar despacho de uso do React
Redux e, aqui, podemos obter acesso a essa
função de despacho executando o uso de despacho e, em seguida,
aqui em uso, adicionamos despacho como uma dependência porque, nesse efeito, funciona aqui, despacho e agora preciso de
minhas ações de pedido, então deixe-me
importar tudo como ações de pedidos da pasta da loja, da pasta de ações, do arquivo de
pedidos e com o importado aqui , podemos dizer ações de pedidos. fetchOrders assim e então faremos a solicitação e, portanto, agora, se
salvarmos isso e formos para a tela de pedidos, ele ficará vazio,
mas muito rápido, e carregará todos os pedidos que armazenamos e esses são esses três ordens que tenho aqui
e, é claro, podemos expandir isso como antes. Agora, um spinner de carregamento também seria bom e, é claro, você
também pode pausar
o vídeo aqui e tentar fazer isso sozinho.
Eu farei isso rapidamente da mesma maneira que antes - importe o
estado de uso do React, então aqui configure o estado isLoading e defina isLoading executando o estado de uso e definindo-o como false inicialmente
e depois aqui no efeito, no final, eu quero para usar async aguardam.
Agora eu disse que você não pode ou não deve adicionar assíncrono aqui, para que possamos usá-lo aqui simplesmente ou agrupá-lo em
uma função auxiliar.
Agora vou usar apenas a chamada then, então configurarei o isLoading como true aqui e, em seguida, adicionarei aqui e assim que isso for feito,
sei que temos uma resposta, então aqui configurarei o isLoading como false.
Agora, observe que não estou lidando com erros aqui; portanto, se
isso falhar, não estamos lidando com isso, estaremos sempre
no estado de carregamento; portanto, é claro que você
pode considerar adicionar também o tratamento de erros. Eu simplesmente não o farei aqui porque
mostrei como ele funciona, para não inchar muito este módulo, não
o implementarei, mas posso, mas é
claro que você pode lidar com erros aqui, se você quiser usar isso, então se aproxime aqui
adicionando também catch, isso
é algo que você pode absolutamente fazer aqui.
No entanto,
vou me concentrar na parte de carregamento. Agora que já tenho tudo isso configurado, podemos
importar o indicador de atividade
e o componente view e, para obter alguns estilos, também importar a API da folha de estilo do React Native e verificar se
estamos no estado de carregamento. Nesse caso, eu deseja retornar meu indicador de atividade centralizada aqui com um tamanho grande e uma
cor que devam ser as cores que você precisa importar, portanto, primárias, portanto, verifique se a importação
de cores foi adicionada e, com isso, aqui adicionarei estilo igual para estilos. centralizado ou no entanto você deseja nomeá-lo e agora adicione esse objeto de
estilos aqui com a ajuda da Folha de estilo. criar e centralizar devem ter
a configuração do flex one, justificar o centro de conteúdo e alinhar o centro
de itens, assim. Com isso, se salvarmos, daremos uma olhada nas ordens, veremos o botão giratório. Novamente, ele está carregando muito rápido, mas você
pode vê-lo se olhar de perto. Aqui está o botão giratório por uma fração de segundo
e, a partir de então, os pedidos são carregados. Portanto, agora está funcionando, armazenar e buscar pedidos
também funciona e, com isso, implementamos solicitações HTTP e usamos um servidor para armazenar os dados neste aplicativo.