Então agora que adicionamos armazenamento, busca, atualização e exclusão e, portanto, todas as funcionalidades brutas,
e vimos mostrando um controle giratório de carregamento e tratamento de
erros, faltam duas coisas.
Uma é que, quando efetivamente fazemos um pedido, enviamos esse pedido também para um servidor e também armazenamos o pedido lá e
não apenas localmente, porque agora, é claro,
quando pedimos algo, o vemos aqui, mas assim que possível. recarregamos o aplicativo, já que não
o estamos armazenando em um servidor, que está perdido, então
isso é uma coisa.
A outra coisa é, é claro, que apenas mostramos um botão giratório de
carregamento aqui e também lidamos apenas com erros aqui. Na tela do administrador, se algo
der errado, não obteremos nenhum erro, também aqui, se editarmos e enviarmos, não
veremos o botão giratório de carregamento enquanto aguardamos o envio.
Então isso também é algo que poderíamos melhorar
e essa é realmente a parte que eu quero começar.
Então, aqui na tela de edição do produto, quando despacharmos atualização ou criação, nos dois casos, é claro,
isso leva um tempo e, de fato, recebemos uma promessa aqui porque, tanto na ação de atualização quanto na criação do
produto, estamos usando o recurso Redux Thunk de retornando uma função de expedição assíncrona aqui que, portanto, retorna uma
promessa que, portanto, é retornada como parte de nossa chamada de função de expedição aqui.
Portanto, na verdade, obtemos as informações, se estamos aguardando a resposta, se recebemos um
erro ou se acabamos, só
precisamos usá-las e, é
claro, podemos usá-las da mesma maneira que fizemos antes, com o estado de uso importado do React e, em
seguida, gerenciando o estado de carregamento e erro aqui. Nota lateral, é claro que você também pode trabalhar com
um redutor no qual mescla os dois estados, se desejar, com a ajuda do gancho do redutor de uso.
Aqui, no entanto, vou me ater a isLoading e definir isLoading e, inicialmente, é claro que isso é falso e também ter o
erro e definir variáveis de erro aqui com um estado de uso como este, que inicialmente é indefinido e agora só precisamos definir isso
como nós ' reenviando ações ou quando estivermos recebendo erros.
Portanto, aqui quando estamos prestes a enviar isso, não importa se estamos
editando ou criando, quero definir isLoading como true e também quero definir meu erro aqui como false ou não false, null , redefina-o.
Agora que terminamos, quero fazer outra coisa, mas, para isso, precisamos primeiro esperar o
término do envio.
Agora, portanto, podemos transformar isso em uma função assíncrona novamente, para que eu possa usar para
aguardar a palavra-chave, a alternativa seria não transformar isso em uma função assíncrona e simplesmente adicionar e capturar a
seguir, isso
funcionaria bem, mas Eu gosto de usar async aguardam. Portanto, agora podemos aguardar o término de ambos os despachos, é
claro que apenas um dos dois será executado porque essa é uma condição if, mas podemos
esperar que isso termine e, portanto, após este bloco
if, sabemos que será feito o despacho. pode definir isLoading de volta para false. Então, esse é o estado de carregamento, agora, para lidar
com erros, só precisamos agrupar isso com um bloco try catch e, na verdade, podemos agrupar todo o
bloco if aqui com try catch, então vamos pegar isso, movê-lo aqui e depois capturar qualquer potencial erros que podemos estar
chegando aqui e agora aqui, é claro que quero definir meu erro como o erro que
estou
chegando aqui ou com a mensagem de erro que estou chegando aqui Agora, estamos definindo o erro, definindo
o carregamento estado, é claro que isso não tem efeito aqui nesta tela. Então, para mostrar um controle giratório de carregamento, precisamos importar o indicador de atividade
do React Native, o indicador de atividade do React
Native e, para mostrar um erro, também quero lançar um alerta e,
para isso, você precisa se certificar de que está importando o alerta que já estamos fazendo. Agora, como próximo passo, para lidar com o estado de carregamento, talvez lá
em baixo antes de retornar meu formulário, verificarei se isLoading é verdadeiro e, se for, retornarei minha visualização aqui com
o indicador de atividade lá e ali, ' Você definirá o tamanho como grande e definirá a cor como cores e, para
isso, precisará importar essas cores como primário primário. Portanto, certifique-se de que as cores sejam importadas
constantemente aqui, isso é necessário e agora também usarei a folha de estilo aqui para adicionar um novo
estilo, esse estilo centrado para ser preciso, aqui eu adicionarei centrado e, portanto, poderíamos, portanto, terceirizar
isso em um componente de embalagem separado, se desejar.
Lá, vou definir flex para um, justificar o conteúdo para centralizar e também alinhar itens para centralizar, assim.
Agora, podemos aplicar esse estilo centralizado aqui à exibição que envolvo em torno do meu indicador de atividade,
definindo o estilo aqui para estilos. centrado.
Agora devemos ver isso enquanto carregamos e, em uma nota lateral, também não devemos voltar antes
de terminar.
Portanto, se eu adicionar ou remover esse ponto de exclamação e deixar essa entrada para que ela seja enviada e clicar em
salvar, você viu
o botão giratório de carregamento e só voltaremos depois que isso for feito.
Agora o Firebase é super rápido, mas ainda assim, foi o que aconteceu.
Agora, para simular um erro, irei às ações dos produtos e, na atualização do produto aqui embaixo, removerei os s aqui novamente para forçar um erro e também adicionarei outra
coisa, agora armazenarei a resposta aqui em um constante, porque agora eu realmente me importo,
quero ter certeza de que, se a resposta não estiver boa, por isso,
se tivermos um código de status 400 ou 500, também lançarei um
novo erro onde digo que algo deu errado ou onde você comete qualquer erro manipulação que você deseja fazer, para
que também apresentemos um erro nesse caso. A propósito, farei o mesmo
para excluir antes de testarmos esse erro forçado que eu implementei.
Então aqui para excluir, também quero verificar isso e, claro, aqui,
também preciso obter minha resposta aguardando a busca aqui. Tudo bem, vamos ver se esse erro
forçado de atualização devido a descartar s aqui,
se isso tiver algum efeito. Se agora eu voltar aqui para o administrador, começar a adicionar,
adicionar um ponto de
exclamação e clicar nele, agora o que você verá é que a atualização foi simplesmente descartada, para que não vejamos o ponto
de exclamação aqui, mas também não recebo nenhuma mensagem de erro que faça sentido porque não tenho lógica para fazer isso.
Agora, como podemos lidar com isso?
Como eu disse, quero acionar
um alerta e, portanto, usarei use effect, para que use o hook de efeito que o
React oferece, o que encontramos aqui, eu quero usá-lo e posso simplesmente implementá-lo aqui
após inicializar o redutor, digamos: posição exata não importa muito. Use effect aqui deve ser executado novamente sempre que o
erro mudar; portanto, se definirmos que isso é um erro
para não ser um erro, então aqui eu verifico se o erro é verdadeiro; portanto,
se tivermos um erro e se o tivermos, então eu pode lançar
um alerta, ocorreu um erro.
Quero gerar meu erro aqui e essa deve ser a mensagem de erro, porque é isso que estou definindo aqui, estou
configurando
meu erro para a mensagem, de modo que seja uma string que eu possa gerar e
depois adicionarei um botão onde eu digo OK, que simplesmente descarta isso. Agora também é importante: se recebermos um
erro, não quero sair. Portanto, para evitar que isso aconteça, quero
ter certeza de que aqui, esses adereços, essa navegação aqui realmente seja realizada apenas se não acabarmos nesse bloco de captura.
Então, basicamente aqui depois do bloco if else, mas ainda no bloco try, lá quero navegar para longe.
Então agora vamos tentar novamente, vamos voltar
aqui, editar, adicionar um ponto
de exclamação, clicar em outro lugar, clicar em salvar e agora recebo
minha mensagem de erro aqui e permaneço nesta página e ela também é redefinida. Posso adicionar isso novamente, clique aqui
e se foi.
Por outro lado, se agora corrigirmos esse erro aqui nas ações, lendo aqui e agora voltaremos e dar
uma outra olhada nisso, se eu editar isso,
adicione meu ponto de exclamação, clique em outro lugar e clique em
salvar, agora que tudo funciona como deveria.
Então agora isso realmente funciona e agora se comporta da maneira que deveria se comportar.
Agora você também pode adicionar um controle giratório de carregamento e um manipulador de erros aqui na tela do produto do
usuário, se desejar.
Portanto, se você excluir isso, o que não vou fazer aqui, mas se você excluir, atualmente você não
obteria um girador, um girador
de carregamento, também não receberá um erro se ele falhar. Para economizar algum tempo, não implementarei isso aqui,
mas você pode implementá-lo basicamente da mesma maneira que fizemos antes, se você quiser.
Então isso é algo que você definitivamente pode fazer.