Antes de continuarmos atualizando ou editando os dados ou excluindo-os, também devemos garantir que não
visualizamos os dados simulados aqui inicialmente, mas que na verdade vemos um girador de
carregamento e talvez também uma mensagem se não houver dados a serem carregados ou uma mensagem de erro, se
houver um erro e, para isso, vamos começar com
o botão giratório de carregamento. Na tela de visão geral dos produtos, quero
mostrar um botão giratório de carregamento enquanto aguardamos a chegada dos dados. Para isso, primeiro precisamos saber se
estamos carregando ou não e podemos controlar isso com o estado de uso,
portanto com um estado interno nesse componente.
Portanto, podemos adicionar isLoading e definir isLoading e, em seguida, simplesmente usar o estado aqui como este e, inicialmente, não estamos
carregando, então eu defino o estado inicial
como false e agora aqui quando o despacharmos, então aqui em uso, defino isLoading
para true, é claro, mas quando terminarmos, quero defini-lo novamente como false.
Agora, a coisa boa é despachar aqui, despacha nossa ação de buscar produtos e, portanto, isso aqui nos dá uma promessa, portanto, aqui
posso adicionar e
também capturar mais tarde para que o tratamento de erros faça alguma coisa depois que isso for feito.
Você também pode usar o Async Aguardar, mas não é permitido usá-lo desta forma
aqui em efeito de uso; não é apenas assim que o efeito de uso deve ser usado.
Portanto, se você quiser usar o uso assíncrono aqui, será necessário agrupá-lo em uma
função separada que você deve criar em seu efeito, como carregar produtos, que são apenas uma função de invólucro fictício
que se parece com isso, talvez com set isLoading in lá também.
Agora, aqui você pode adicionar assíncrono e agora pode chamar carregar produtos como esse logo em seguida, simplesmente um
invólucro necessário devido à maneira como o efeito de
uso funciona, ele não
deve retornar uma promessa, o faria se você usar o assíncrono aqui e portanto, usando async não é
permitido, por outro lado, é permitido.
Portanto, agora aqui,
podemos aguardar aqui para aguardar o envio, o que significa que isso aguardará automaticamente
a promessa que existe, portanto, para a solicitação HTTP e, posteriormente, definimos isLoading como false,
uma vez feito isso.
Agora, para mostrar um spinner, felizmente, o React Native conseguiu um para nós, o indicador de atividade
que ficará automaticamente bom para iOS
e Android, para que obtenha automaticamente o estilo de plataforma
padrão e agora podemos renderizá-lo se estiver carregando. Então, lá em baixo, em
vez de retornar a lista simples, se isLoading for true, retornarei uma parte diferente de jsx, retornarei
uma nova visualização aqui com meu indicador de atividade. Para isso, é claro, você precisa ter a visualização importada também, portanto, verifique se isso também está disponível.
Agora, com isso, retornamos essa visualização com o indicador de atividade, onde você pode
configurar o tamanho para ser grande e a cor como Cores. primário, por exemplo, e isso, obviamente, exige que você importe que as cores sejam
constantes; portanto, certifique-se de que esteja disponível e, por último, mas não menos importante, agora quero centralizar esse indicador, para que possamos adicionar um
estilo que, é claro, poderíamos definir com uma folha de estilo ou aqui rápida e suja,
flexione um justifique o centro de conteúdo, alinhe o centro de itens. No entanto, na verdade, usarei uma folha de
estilo aqui, porque precisaremos disso em um local diferente posteriormente.
Então, aqui vou me referir a estilos, digamos centralizados e importar folha de estilo do React Native e,
com isso, depois desça, adicione meu objeto de estilos depois de configurar as opções de
navegação, talvez estilos com folha de estilo. criar, adicionar a propriedade centralizada, que possui esse estilo com itens de
alinhamento de conteúdo justificado por flex e agora, com isso, devemos ver um indicador de atividade centralizada enquanto carregamos.
Portanto, se eu salvar isso e recarregar, o Firebase é muito rápido, para que você não o veja por muito tempo, mas por um
curto período de tempo, você verá o carregamento giratório aqui, com a aparência diferente no iOS e no Android, é claro.
Agora, é claro que o carregamento é uma coisa, às vezes você também não possui nenhum dado que possa ser carregado. Digamos que em um
redutor, estamos alcançando o produto. json, que é uma fonte na qual nenhum dado pode
ser buscado e, portanto, acabamos com uma tela vazia.
Bem, isso é algo que podemos fazer, mas não é a
melhor experiência possível para o usuário, por isso, quero adicionar outra se verificar onde verifico se isLoading é falso; portanto, se
não estivermos carregando mais e meus produtos aqui, o comprimento será igual a zero, o que significa que não temos produtos.
Nesse caso, também retornarei meu conteúdo centralizado aqui, mas simplesmente quero exibir um texto
em que digo que nenhum produto foi encontrado, talvez
comece a adicionar alguns e, é claro, você precisa importar o componente de texto e Você também pode atribuir seus estilos de fonte ou
criar um componente de invólucro de texto padrão que usamos nos módulos anteriores. Por enquanto, terei meu texto
como este
e é isso que vemos por enquanto. É claro que, assim que eu
volto para o URL correto, onde realmente encontramos dados, ele funciona. Agora, por último, mas não menos importante, você também pode ter
um erro. Digamos aqui, eu
não tenho. json, é claro
que esse é um erro que normalmente evitaríamos, porque isso é apenas um erro de digitação do nosso
lado, mas infelizmente os servidores Firebase são relativamente robustos. Então, para fingir que eles, por exemplo, caíram ou algo
deu
errado, apenas quebrarei o URL dessa maneira, que é um URL inválido e agora o que vemos é um girador infinito.
A razão para isso é que, na verdade, agora não temos uma resposta válida. Portanto, se dermos uma olhada em nossa ação aqui e registrarmos
esses dados de resposta aqui, veremos que, conforme isso é recarregado, a busca deve acontecer
imediatamente, mas não obtemos nenhuma
saída lá, não
vemos nada sendo registrado isso,
recebemos um aviso de rejeição de promessa em algum momento, então parece que estamos simplesmente recebendo
um erro e, no momento, não
estamos tratando de um erro.
Agora, se você estivesse usando promessas sem aguardar assincronia, basta adicionar a instrução catch.
Aqui estamos usando
o Async Aguardar, então o que fazemos é agrupar isso em um bloco try, todo o código
que queremos executar se tudo der certo e detectar algum erro
aqui, portanto, um bloco try catch. É aí que obtemos um erro em
potencial e agora, com esse erro obtido aqui, podemos lidar com
isso, por exemplo, enviá-lo para o nosso próprio servidor analítico ou fazer o que quisermos e, talvez, também repeti-lo
novamente, é claro, se tudo o que você faz é repensando-o, você não precisaria adicionar esse bloco
try catch, mas normalmente você pode querer fazer mais aqui - envie para o servidor de análise personalizado
ou algo parecido como mencionei.
Portanto, agora que repetimos o erro novamente, ainda não melhor, ainda
nos causa um erro e, além de apenas tentar entender isso, devemos adicionar outra verificação
aqui antes de descompactar o corpo da
resposta, também devemos verificar se a resposta ok está errado, se isso é falso.
OK é um campo que você tem disponível nesse objeto de resposta e isso simplesmente é verdadeiro se a
resposta estiver no intervalo de código de status 200. Se estiver em um intervalo diferente, por exemplo, porque você
não está autenticado ou algo assim, a API de busca por padrão não gera um erro.
No entanto, eu quero gerar um erro nesse caso, para que sempre acabemos no bloco de captura se tivermos um
código de status 400 ou 500 ou se tivermos um problema de solicitação de rede, por exemplo, se a solicitação não puder
deixar o dispositivo.
Então, aqui está a API de busca específica para lidar com códigos de status 400 e 500, o que
normalmente não causaria
um erro, também lançarei um novo erro nesse caso em que digo que algo
deu errado, é claro que você pode mergulhar no corpo de resposta aqui também e descobrir o que está
errado lá, mas vou lançar esse erro genérico e agora definitivamente teremos um erro
se algo der errado se não recuperarmos nossos dados, mas ainda assim, apenas repita o erro aqui.
Mas o lugar onde eu finalmente quero lidar com isso é meu componente aqui, meu
componente de tela porque lá, eu quero mostrar uma mensagem de erro. Portanto, lá temos o nosso efeito e, da mesma
forma que poderíamos usar catch ou o manipulador de catch, se você usá-lo e catch ou assync aguardam com
try catch na
ação, também podemos fazê-lo aqui.
Então, aqui, quero tentar despachar isso, mas quero capturar possíveis erros que possamos obter.
Então, aqui eu pego
os erros que isso pode resultar e, como eu repito o erro lá, foi o que acabei de fazer
aqui, certo, finalmente o erro chegará até aqui.
Então agora, finalmente, acabaremos nesse bloco de captura e agora,
para mostrar nossos dados de erro, podemos adicionar outro estado - erro e definir erro, você pode nomear como
quiser.
Inicialmente isso é indefinido porque, inicialmente, não tenho erro, mas aqui, chamarei set error e defino-o
como erro. mensagem, por exemplo, para
a mensagem deste erro que estou recebendo.
Ainda, é claro, quero definir o carregamento como false a partir de então, isso não
muda, porque definitivamente
não estamos mais carregando, mesmo que tenhamos um erro, mas agora também temos esse estado de erro que podemos usar, podemos
usá-lo para verificar aqui. Se tivermos um
erro, por isso, se isso for verdade, eu nem preciso continuar. Em vez disso, quero retornar meu conteúdo jsx centralizado aqui, mas
ali, quero apenas gerar
um texto onde digamos que ocorreu um erro, por exemplo , como isso. Se agora fizermos isso, você verá um botão
giratório, mas o
texto
do erro será exibido. Agora, é claro, isso não permite que
o usuário faça muito, agora podemos simplesmente navegar e voltar, mas
podemos oferecer ao usuário uma maneira de tentar novamente, talvez adicionando um botão aqui. Portanto, agora aqui com o botão importado, podemos ir
lá e, em seguida, adicionar este componente do botão com um título de tentar novamente e, é claro, depende totalmente de você como você deseja
permitir que o usuário lide com isso e aí você pode
adicionar um manipulador onPress e Agora, para poder carregar novamente, na verdade pegarei essa
função de carregamento de produtos aqui, a removerei do
efeito e a tornarei uma função regular desse componente para que eu possa chamá-la de
efeito de uso interno.
Agora, no entanto, ele também precisa ser uma dependência e, portanto, para evitar um
loop infinito, ele deve ser empacotado no retorno de chamada de uso, então vamos importar o uso de retorno de chamada aqui e envolvê-lo nesta função
aqui, onde a dependência
é minha
função de despacho, você também
pode add set isLoading e set error, mas todas essas funções nunca
serão alteradas, portanto, você também poderá omiti-las e, portanto, isso nunca será recriado, o que
é bom, mas agora podemos usar
produtos de carregamento como uma dependência aqui em uso e
agora porque não está dentro da função use effect, podemos usar carregar produtos em qualquer outro
lugar deste componente e a parte de qualquer
outro lugar está aqui neste botão. Se pressionarmos isso, também quero acionar carregar produtos novamente e, por último,
mas não menos importante, dê o botão cor das cores. primário. Com isso, parece que eu tenho um erro aqui com minhas
importações, sim, eu já tive o botão importado, então vamos nos livrar da segunda importação, apenas importá-la
uma vez e agora
o que você verá é que isso realmente será recarregado, eventualmente lançar um erro e você pode pressionar tentar novamente para recarregá-lo,
no entanto, sempre vemos a mensagem de erro simplesmente porque nunca limpamos o erro
e, se houver um erro, sempre
retornamos isso, nem chegamos ao carregamento spinner.
Portanto, devemos garantir que, sempre que carregarmos nossos produtos aqui, configuremos o erro novamente
como nulo, para redefinir o erro. A propósito, várias chamadas de estado definido próximas umas das outras serão agrupadas
em lotes pelo React, portanto, isso não levará a vários ciclos de
re-renderização de componentes; é bom usá-lo dessa maneira.
Então agora, se eu clicar em tentar novamente, podemos tentar novamente. Obviamente, isso nunca será bem-sucedido porque nosso URL
está quebrado, mas ainda assim, é assim que podemos lidar com esse erro. Com isso, no entanto, voltarei às minhas ações e
corrigirei esse erro corrigindo este URL novamente e agora isso também
deve carregar nossos dados corretamente e exibi-los.