1
00:00:02,110 --> 00:00:07,990
Então agora que adicionamos armazenamento, busca, atualização e exclusão e, portanto, todas as funcionalidades brutas,

2
00:00:07,990 --> 00:00:12,070
e vimos mostrando um controle giratório de carregamento e tratamento de

3
00:00:12,070 --> 00:00:14,020
erros, faltam duas coisas.

4
00:00:14,020 --> 00:00:20,560
Uma é que, quando efetivamente fazemos um pedido, enviamos esse pedido também para um servidor e também armazenamos o pedido lá e

5
00:00:20,560 --> 00:00:22,900
não apenas localmente, porque agora, é claro,

6
00:00:22,900 --> 00:00:27,760
quando pedimos algo, o vemos aqui, mas assim que possível. recarregamos o aplicativo, já que não

7
00:00:27,760 --> 00:00:30,650
o estamos armazenando em um servidor, que está perdido, então

8
00:00:30,660 --> 00:00:32,160
isso é uma coisa.

9
00:00:32,170 --> 00:00:35,130
A outra coisa é, é claro, que apenas mostramos um botão giratório de

10
00:00:35,200 --> 00:00:39,570
carregamento aqui e também lidamos apenas com erros aqui. Na tela do administrador, se algo

11
00:00:39,610 --> 00:00:43,970
der errado, não obteremos nenhum erro, também aqui, se editarmos e enviarmos, não

12
00:00:44,080 --> 00:00:47,320
veremos o botão giratório de carregamento enquanto aguardamos o envio.

13
00:00:47,320 --> 00:00:49,120
Então isso também é algo que poderíamos melhorar

14
00:00:49,150 --> 00:00:51,310
e essa é realmente a parte que eu quero começar.

15
00:00:52,210 --> 00:00:57,670
Então, aqui na tela de edição do produto, quando despacharmos atualização ou criação, nos dois casos, é claro,

16
00:00:57,670 --> 00:01:04,210
isso leva um tempo e, de fato, recebemos uma promessa aqui porque, tanto na ação de atualização quanto na criação do

17
00:01:04,600 --> 00:01:10,270
produto, estamos usando o recurso Redux Thunk de retornando uma função de expedição assíncrona aqui que, portanto, retorna uma

18
00:01:10,270 --> 00:01:15,340
promessa que, portanto, é retornada como parte de nossa chamada de função de expedição aqui.

19
00:01:15,520 --> 00:01:20,680
Portanto, na verdade, obtemos as informações, se estamos aguardando a resposta, se recebemos um

20
00:01:20,710 --> 00:01:22,470
erro ou se acabamos, só

21
00:01:22,630 --> 00:01:24,380
precisamos usá-las e, é

22
00:01:24,520 --> 00:01:31,300
claro, podemos usá-las da mesma maneira que fizemos antes, com o estado de uso importado do React e, em

23
00:01:31,300 --> 00:01:37,650
seguida, gerenciando o estado de carregamento e erro aqui. Nota lateral, é claro que você também pode trabalhar com

24
00:01:37,650 --> 00:01:43,080
um redutor no qual mescla os dois estados, se desejar, com a ajuda do gancho do redutor de uso.

25
00:01:43,380 --> 00:01:52,750
Aqui, no entanto, vou me ater a isLoading e definir isLoading e, inicialmente, é claro que isso é falso e também ter o

26
00:01:52,750 --> 00:02:02,510
erro e definir variáveis de erro aqui com um estado de uso como este, que inicialmente é indefinido e agora só precisamos definir isso

27
00:02:02,880 --> 00:02:07,470
como nós ' reenviando ações ou quando estivermos recebendo erros.

28
00:02:07,470 --> 00:02:13,530
Portanto, aqui quando estamos prestes a enviar isso, não importa se estamos

29
00:02:13,530 --> 00:02:25,000
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.

30
00:02:25,190 --> 00:02:30,420
Agora que terminamos, quero fazer outra coisa, mas, para isso, precisamos primeiro esperar o

31
00:02:30,420 --> 00:02:31,840
término do envio.

32
00:02:31,860 --> 00:02:37,770
Agora, portanto, podemos transformar isso em uma função assíncrona novamente, para que eu possa usar para

33
00:02:37,770 --> 00:02:44,720
aguardar a palavra-chave, a alternativa seria não transformar isso em uma função assíncrona e simplesmente adicionar e capturar a

34
00:02:44,770 --> 00:02:45,810
seguir, isso

35
00:02:45,810 --> 00:02:52,620
funcionaria bem, mas Eu gosto de usar async aguardam. Portanto, agora podemos aguardar o término de ambos os despachos, é

36
00:02:52,620 --> 00:02:57,230
claro que apenas um dos dois será executado porque essa é uma condição if, mas podemos

37
00:02:57,330 --> 00:03:00,380
esperar que isso termine e, portanto, após este bloco

38
00:03:00,370 --> 00:03:08,370
if, sabemos que será feito o despacho. pode definir isLoading de volta para false. Então, esse é o estado de carregamento, agora, para lidar

39
00:03:08,370 --> 00:03:15,420
com erros, só precisamos agrupar isso com um bloco try catch e, na verdade, podemos agrupar todo o

40
00:03:15,420 --> 00:03:23,250
bloco if aqui com try catch, então vamos pegar isso, movê-lo aqui e depois capturar qualquer potencial erros que podemos estar

41
00:03:23,250 --> 00:03:29,400
chegando aqui e agora aqui, é claro que quero definir meu erro como o erro que

42
00:03:29,400 --> 00:03:30,000
estou

43
00:03:33,030 --> 00:03:39,720
chegando aqui ou com a mensagem de erro que estou chegando aqui Agora, estamos definindo o erro, definindo

44
00:03:39,780 --> 00:03:50,380
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

45
00:03:50,410 --> 00:03:54,120
do React Native, o indicador de atividade do React

46
00:03:54,130 --> 00:03:58,930
Native e, para mostrar um erro, também quero lançar um alerta e,

47
00:03:58,930 --> 00:04:10,540
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á

48
00:04:10,540 --> 00:04:19,930
em baixo antes de retornar meu formulário, verificarei se isLoading é verdadeiro e, se for, retornarei minha visualização aqui com

49
00:04:19,930 --> 00:04:30,010
o indicador de atividade lá e ali, ' Você definirá o tamanho como grande e definirá a cor como cores e, para

50
00:04:30,310 --> 00:04:38,980
isso, precisará importar essas cores como primário primário. Portanto, certifique-se de que as cores sejam importadas

51
00:04:38,980 --> 00:04:47,480
constantemente aqui, isso é necessário e agora também usarei a folha de estilo aqui para adicionar um novo

52
00:04:47,500 --> 00:04:55,120
estilo, esse estilo centrado para ser preciso, aqui eu adicionarei centrado e, portanto, poderíamos, portanto, terceirizar

53
00:04:55,120 --> 00:04:59,910
isso em um componente de embalagem separado, se desejar.

54
00:05:00,010 --> 00:05:08,300
Lá, vou definir flex para um, justificar o conteúdo para centralizar e também alinhar itens para centralizar, assim.

55
00:05:08,410 --> 00:05:15,250
Agora, podemos aplicar esse estilo centralizado aqui à exibição que envolvo em torno do meu indicador de atividade,

56
00:05:15,250 --> 00:05:19,990
definindo o estilo aqui para estilos. centrado.

57
00:05:20,040 --> 00:05:26,460
Agora devemos ver isso enquanto carregamos e, em uma nota lateral, também não devemos voltar antes

58
00:05:26,460 --> 00:05:27,480
de terminar.

59
00:05:27,840 --> 00:05:33,700
Portanto, se eu adicionar ou remover esse ponto de exclamação e deixar essa entrada para que ela seja enviada e clicar em

60
00:05:33,700 --> 00:05:34,640
salvar, você viu

61
00:05:34,770 --> 00:05:38,400
o botão giratório de carregamento e só voltaremos depois que isso for feito.

62
00:05:38,400 --> 00:05:42,180
Agora o Firebase é super rápido, mas ainda assim, foi o que aconteceu.

63
00:05:42,330 --> 00:05:52,970
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

64
00:05:52,970 --> 00:05:58,310
coisa, agora armazenarei a resposta aqui em um constante, porque agora eu realmente me importo,

65
00:05:58,400 --> 00:06:03,130
quero ter certeza de que, se a resposta não estiver boa, por isso,

66
00:06:03,200 --> 00:06:07,240
se tivermos um código de status 400 ou 500, também lançarei um

67
00:06:07,250 --> 00:06:14,360
novo erro onde digo que algo deu errado ou onde você comete qualquer erro manipulação que você deseja fazer, para

68
00:06:14,360 --> 00:06:20,200
que também apresentemos um erro nesse caso. A propósito, farei o mesmo

69
00:06:20,210 --> 00:06:25,620
para excluir antes de testarmos esse erro forçado que eu implementei.

70
00:06:25,670 --> 00:06:29,150
Então aqui para excluir, também quero verificar isso e, claro, aqui,

71
00:06:29,360 --> 00:06:36,120
também preciso obter minha resposta aguardando a busca aqui. Tudo bem, vamos ver se esse erro

72
00:06:36,120 --> 00:06:40,400
forçado de atualização devido a descartar s aqui,

73
00:06:40,470 --> 00:06:46,680
se isso tiver algum efeito. Se agora eu voltar aqui para o administrador, começar a adicionar,

74
00:06:46,680 --> 00:06:48,010
adicionar um ponto de

75
00:06:48,030 --> 00:06:54,150
exclamação e clicar nele, agora o que você verá é que a atualização foi simplesmente descartada, para que não vejamos o ponto

76
00:06:54,240 --> 00:07:00,230
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.

77
00:07:00,310 --> 00:07:01,700
Agora, como podemos lidar com isso?

78
00:07:01,720 --> 00:07:04,310
Como eu disse, quero acionar

79
00:07:04,330 --> 00:07:10,610
um alerta e, portanto, usarei use effect, para que use o hook de efeito que o

80
00:07:10,690 --> 00:07:16,690
React oferece, o que encontramos aqui, eu quero usá-lo e posso simplesmente implementá-lo aqui

81
00:07:16,710 --> 00:07:24,490
após inicializar o redutor, digamos: posição exata não importa muito. Use effect aqui deve ser executado novamente sempre que o

82
00:07:24,880 --> 00:07:28,670
erro mudar; portanto, se definirmos que isso é um erro

83
00:07:28,750 --> 00:07:34,510
para não ser um erro, então aqui eu verifico se o erro é verdadeiro; portanto,

84
00:07:34,510 --> 00:07:39,010
se tivermos um erro e se o tivermos, então eu pode lançar

85
00:07:39,010 --> 00:07:41,380
um alerta, ocorreu um erro.

86
00:07:41,380 --> 00:07:48,920
Quero gerar meu erro aqui e essa deve ser a mensagem de erro, porque é isso que estou definindo aqui, estou

87
00:07:48,920 --> 00:07:49,350
configurando

88
00:07:49,370 --> 00:07:55,270
meu erro para a mensagem, de modo que seja uma string que eu possa gerar e

89
00:07:55,270 --> 00:08:04,610
depois adicionarei um botão onde eu digo OK, que simplesmente descarta isso. Agora também é importante: se recebermos um

90
00:08:04,610 --> 00:08:11,180
erro, não quero sair. Portanto, para evitar que isso aconteça, quero

91
00:08:11,210 --> 00:08:19,670
ter certeza de que aqui, esses adereços, essa navegação aqui realmente seja realizada apenas se não acabarmos nesse bloco de captura.

92
00:08:19,700 --> 00:08:27,390
Então, basicamente aqui depois do bloco if else, mas ainda no bloco try, lá quero navegar para longe.

93
00:08:27,410 --> 00:08:29,300
Então agora vamos tentar novamente, vamos voltar

94
00:08:29,300 --> 00:08:30,710
aqui, editar, adicionar um ponto

95
00:08:30,710 --> 00:08:33,920
de exclamação, clicar em outro lugar, clicar em salvar e agora recebo

96
00:08:33,920 --> 00:08:40,730
minha mensagem de erro aqui e permaneço nesta página e ela também é redefinida. Posso adicionar isso novamente, clique aqui

97
00:08:40,760 --> 00:08:43,430
e se foi.

98
00:08:43,700 --> 00:08:50,150
Por outro lado, se agora corrigirmos esse erro aqui nas ações, lendo aqui e agora voltaremos e dar

99
00:08:50,150 --> 00:08:52,960
uma outra olhada nisso, se eu editar isso,

100
00:08:52,970 --> 00:08:57,170
adicione meu ponto de exclamação, clique em outro lugar e clique em

101
00:08:57,170 --> 00:08:59,880
salvar, agora que tudo funciona como deveria.

102
00:08:59,900 --> 00:09:04,200
Então agora isso realmente funciona e agora se comporta da maneira que deveria se comportar.

103
00:09:04,220 --> 00:09:09,890
Agora você também pode adicionar um controle giratório de carregamento e um manipulador de erros aqui na tela do produto do

104
00:09:09,890 --> 00:09:10,840
usuário, se desejar.

105
00:09:10,850 --> 00:09:15,800
Portanto, se você excluir isso, o que não vou fazer aqui, mas se você excluir, atualmente você não

106
00:09:15,800 --> 00:09:17,300
obteria um girador, um girador

107
00:09:17,300 --> 00:09:22,610
de carregamento, também não receberá um erro se ele falhar. Para economizar algum tempo, não implementarei isso aqui,

108
00:09:22,610 --> 00:09:26,590
mas você pode implementá-lo basicamente da mesma maneira que fizemos antes, se você quiser.

109
00:09:26,600 --> 00:09:28,670
Então isso é algo que você definitivamente pode fazer.