1
00:00:02,200 --> 00:00:06,570
Antes de continuarmos atualizando ou editando os dados ou excluindo-os, também devemos garantir que não

2
00:00:06,680 --> 00:00:10,810
visualizamos os dados simulados aqui inicialmente, mas que na verdade vemos um girador de

3
00:00:10,810 --> 00:00:16,660
carregamento e talvez também uma mensagem se não houver dados a serem carregados ou uma mensagem de erro, se

4
00:00:16,840 --> 00:00:19,810
houver um erro e, para isso, vamos começar com

5
00:00:19,810 --> 00:00:23,400
o botão giratório de carregamento. Na tela de visão geral dos produtos, quero

6
00:00:23,470 --> 00:00:28,270
mostrar um botão giratório de carregamento enquanto aguardamos a chegada dos dados. Para isso, primeiro precisamos saber se

7
00:00:28,270 --> 00:00:32,430
estamos carregando ou não e podemos controlar isso com o estado de uso,

8
00:00:32,440 --> 00:00:34,850
portanto com um estado interno nesse componente.

9
00:00:35,140 --> 00:00:42,910
Portanto, podemos adicionar isLoading e definir isLoading e, em seguida, simplesmente usar o estado aqui como este e, inicialmente, não estamos

10
00:00:42,910 --> 00:00:45,890
carregando, então eu defino o estado inicial

11
00:00:46,630 --> 00:00:51,610
como false e agora aqui quando o despacharmos, então aqui em uso, defino isLoading

12
00:00:51,610 --> 00:00:56,130
para true, é claro, mas quando terminarmos, quero defini-lo novamente como false.

13
00:00:56,170 --> 00:01:03,610
Agora, a coisa boa é despachar aqui, despacha nossa ação de buscar produtos e, portanto, isso aqui nos dá uma promessa, portanto, aqui

14
00:01:03,610 --> 00:01:04,780
posso adicionar e

15
00:01:04,840 --> 00:01:10,690
também capturar mais tarde para que o tratamento de erros faça alguma coisa depois que isso for feito.

16
00:01:10,870 --> 00:01:15,670
Você também pode usar o Async Aguardar, mas não é permitido usá-lo desta forma

17
00:01:15,670 --> 00:01:20,910
aqui em efeito de uso; não é apenas assim que o efeito de uso deve ser usado.

18
00:01:20,910 --> 00:01:25,910
Portanto, se você quiser usar o uso assíncrono aqui, será necessário agrupá-lo em uma

19
00:01:25,910 --> 00:01:32,720
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

20
00:01:32,720 --> 00:01:37,350
que se parece com isso, talvez com set isLoading in lá também.

21
00:01:37,350 --> 00:01:43,530
Agora, aqui você pode adicionar assíncrono e agora pode chamar carregar produtos como esse logo em seguida, simplesmente um

22
00:01:43,530 --> 00:01:46,530
invólucro necessário devido à maneira como o efeito de

23
00:01:46,530 --> 00:01:48,260
uso funciona, ele não

24
00:01:48,300 --> 00:01:54,030
deve retornar uma promessa, o faria se você usar o assíncrono aqui e portanto, usando async não é

25
00:01:54,030 --> 00:01:55,940
permitido, por outro lado, é permitido.

26
00:01:55,950 --> 00:01:57,520
Portanto, agora aqui,

27
00:01:57,540 --> 00:02:03,060
podemos aguardar aqui para aguardar o envio, o que significa que isso aguardará automaticamente

28
00:02:03,060 --> 00:02:08,670
a promessa que existe, portanto, para a solicitação HTTP e, posteriormente, definimos isLoading como false,

29
00:02:08,670 --> 00:02:10,300
uma vez feito isso.

30
00:02:10,710 --> 00:02:16,380
Agora, para mostrar um spinner, felizmente, o React Native conseguiu um para nós, o indicador de atividade

31
00:02:16,380 --> 00:02:18,810
que ficará automaticamente bom para iOS

32
00:02:18,840 --> 00:02:21,950
e Android, para que obtenha automaticamente o estilo de plataforma

33
00:02:22,320 --> 00:02:27,630
padrão e agora podemos renderizá-lo se estiver carregando. Então, lá em baixo, em

34
00:02:27,630 --> 00:02:34,740
vez de retornar a lista simples, se isLoading for true, retornarei uma parte diferente de jsx, retornarei

35
00:02:34,740 --> 00:02:42,040
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.

36
00:02:44,480 --> 00:02:49,370
Agora, com isso, retornamos essa visualização com o indicador de atividade, onde você pode

37
00:02:49,380 --> 00:02:58,310
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

38
00:02:58,310 --> 00:03:05,830
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

39
00:03:05,830 --> 00:03:10,960
estilo que, é claro, poderíamos definir com uma folha de estilo ou aqui rápida e suja,

40
00:03:11,020 --> 00:03:18,880
flexione um justifique o centro de conteúdo, alinhe o centro de itens. No entanto, na verdade, usarei uma folha de

41
00:03:18,880 --> 00:03:23,010
estilo aqui, porque precisaremos disso em um local diferente posteriormente.

42
00:03:23,110 --> 00:03:33,450
Então, aqui vou me referir a estilos, digamos centralizados e importar folha de estilo do React Native e,

43
00:03:33,450 --> 00:03:41,640
com isso, depois desça, adicione meu objeto de estilos depois de configurar as opções de

44
00:03:41,640 --> 00:03:50,890
navegação, talvez estilos com folha de estilo. criar, adicionar a propriedade centralizada, que possui esse estilo com itens de

45
00:03:50,890 --> 00:03:57,450
alinhamento de conteúdo justificado por flex e agora, com isso, devemos ver um indicador de atividade centralizada enquanto carregamos.

46
00:03:57,570 --> 00:04:03,790
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

47
00:04:03,790 --> 00:04:09,580
curto período de tempo, você verá o carregamento giratório aqui, com a aparência diferente no iOS e no Android, é claro.

48
00:04:12,900 --> 00:04:19,110
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

49
00:04:19,110 --> 00:04:25,740
redutor, estamos alcançando o produto. json, que é uma fonte na qual nenhum dado pode

50
00:04:25,740 --> 00:04:28,750
ser buscado e, portanto, acabamos com uma tela vazia.

51
00:04:29,150 --> 00:04:32,920
Bem, isso é algo que podemos fazer, mas não é a

52
00:04:33,060 --> 00:04:39,540
melhor experiência possível para o usuário, por isso, quero adicionar outra se verificar onde verifico se isLoading é falso; portanto, se

53
00:04:41,530 --> 00:04:48,190
não estivermos carregando mais e meus produtos aqui, o comprimento será igual a zero, o que significa que não temos produtos.

54
00:04:48,190 --> 00:04:54,340
Nesse caso, também retornarei meu conteúdo centralizado aqui, mas simplesmente quero exibir um texto

55
00:04:54,340 --> 00:04:58,230
em que digo que nenhum produto foi encontrado, talvez

56
00:04:58,240 --> 00:05:08,530
comece a adicionar alguns e, é claro, você precisa importar o componente de texto e Você também pode atribuir seus estilos de fonte ou

57
00:05:08,530 --> 00:05:15,880
criar um componente de invólucro de texto padrão que usamos nos módulos anteriores. Por enquanto, terei meu texto

58
00:05:15,880 --> 00:05:17,140
como este

59
00:05:17,140 --> 00:05:22,900
e é isso que vemos por enquanto. É claro que, assim que eu

60
00:05:22,900 --> 00:05:31,360
volto para o URL correto, onde realmente encontramos dados, ele funciona. Agora, por último, mas não menos importante, você também pode ter

61
00:05:31,360 --> 00:05:33,680
um erro. Digamos aqui, eu

62
00:05:33,700 --> 00:05:35,850
não tenho. json, é claro

63
00:05:35,860 --> 00:05:41,610
que esse é um erro que normalmente evitaríamos, porque isso é apenas um erro de digitação do nosso

64
00:05:41,620 --> 00:05:48,010
lado, mas infelizmente os servidores Firebase são relativamente robustos. Então, para fingir que eles, por exemplo, caíram ou algo

65
00:05:48,010 --> 00:05:48,520
deu

66
00:05:48,550 --> 00:05:54,850
errado, apenas quebrarei o URL dessa maneira, que é um URL inválido e agora o que vemos é um girador infinito.

67
00:05:55,120 --> 00:06:04,340
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

68
00:06:04,340 --> 00:06:10,490
esses dados de resposta aqui, veremos que, conforme isso é recarregado, a busca deve acontecer

69
00:06:14,420 --> 00:06:16,220
imediatamente, mas não obtemos nenhuma

70
00:06:19,170 --> 00:06:20,950
saída lá, não

71
00:06:21,060 --> 00:06:23,130
vemos nada sendo registrado isso,

72
00:06:23,160 --> 00:06:29,760
recebemos um aviso de rejeição de promessa em algum momento, então parece que estamos simplesmente recebendo

73
00:06:29,970 --> 00:06:32,470
um erro e, no momento, não

74
00:06:32,820 --> 00:06:34,870
estamos tratando de um erro.

75
00:06:34,890 --> 00:06:39,990
Agora, se você estivesse usando promessas sem aguardar assincronia, basta adicionar a instrução catch.

76
00:06:39,990 --> 00:06:41,720
Aqui estamos usando

77
00:06:41,720 --> 00:06:48,660
o Async Aguardar, então o que fazemos é agrupar isso em um bloco try, todo o código

78
00:06:48,660 --> 00:06:52,960
que queremos executar se tudo der certo e detectar algum erro

79
00:06:52,960 --> 00:06:57,340
aqui, portanto, um bloco try catch. É aí que obtemos um erro em

80
00:06:57,340 --> 00:07:00,820
potencial e agora, com esse erro obtido aqui, podemos lidar com

81
00:07:00,820 --> 00:07:06,460
isso, por exemplo, enviá-lo para o nosso próprio servidor analítico ou fazer o que quisermos e, talvez, também repeti-lo

82
00:07:06,670 --> 00:07:11,740
novamente, é claro, se tudo o que você faz é repensando-o, você não precisaria adicionar esse bloco

83
00:07:11,740 --> 00:07:17,080
try catch, mas normalmente você pode querer fazer mais aqui - envie para o servidor de análise personalizado

84
00:07:17,080 --> 00:07:18,930
ou algo parecido como mencionei.

85
00:07:19,150 --> 00:07:23,800
Portanto, agora que repetimos o erro novamente, ainda não melhor, ainda

86
00:07:23,860 --> 00:07:29,890
nos causa um erro e, além de apenas tentar entender isso, devemos adicionar outra verificação

87
00:07:29,890 --> 00:07:32,890
aqui antes de descompactar o corpo da

88
00:07:32,890 --> 00:07:38,770
resposta, também devemos verificar se a resposta ok está errado, se isso é falso.

89
00:07:38,770 --> 00:07:44,670
OK é um campo que você tem disponível nesse objeto de resposta e isso simplesmente é verdadeiro se a

90
00:07:44,680 --> 00:07:50,800
resposta estiver no intervalo de código de status 200. Se estiver em um intervalo diferente, por exemplo, porque você

91
00:07:50,800 --> 00:07:55,360
não está autenticado ou algo assim, a API de busca por padrão não gera um erro.

92
00:07:55,360 --> 00:08:01,000
No entanto, eu quero gerar um erro nesse caso, para que sempre acabemos no bloco de captura se tivermos um

93
00:08:01,450 --> 00:08:07,780
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

94
00:08:07,780 --> 00:08:08,790
deixar o dispositivo.

95
00:08:08,980 --> 00:08:15,250
Então, aqui está a API de busca específica para lidar com códigos de status 400 e 500, o que

96
00:08:15,250 --> 00:08:16,590
normalmente não causaria

97
00:08:16,600 --> 00:08:21,350
um erro, também lançarei um novo erro nesse caso em que digo que algo

98
00:08:21,370 --> 00:08:27,850
deu errado, é claro que você pode mergulhar no corpo de resposta aqui também e descobrir o que está

99
00:08:28,150 --> 00:08:32,910
errado lá, mas vou lançar esse erro genérico e agora definitivamente teremos um erro

100
00:08:32,920 --> 00:08:38,750
se algo der errado se não recuperarmos nossos dados, mas ainda assim, apenas repita o erro aqui.

101
00:08:38,770 --> 00:08:43,020
Mas o lugar onde eu finalmente quero lidar com isso é meu componente aqui, meu

102
00:08:43,030 --> 00:08:50,640
componente de tela porque lá, eu quero mostrar uma mensagem de erro. Portanto, lá temos o nosso efeito e, da mesma

103
00:08:50,830 --> 00:08:58,330
forma que poderíamos usar catch ou o manipulador de catch, se você usá-lo e catch ou assync aguardam com

104
00:08:58,330 --> 00:08:59,860
try catch na

105
00:08:59,920 --> 00:09:01,800
ação, também podemos fazê-lo aqui.

106
00:09:01,840 --> 00:09:09,380
Então, aqui, quero tentar despachar isso, mas quero capturar possíveis erros que possamos obter.

107
00:09:09,400 --> 00:09:10,830
Então, aqui eu pego

108
00:09:10,840 --> 00:09:16,810
os erros que isso pode resultar e, como eu repito o erro lá, foi o que acabei de fazer

109
00:09:16,840 --> 00:09:19,370
aqui, certo, finalmente o erro chegará até aqui.

110
00:09:19,400 --> 00:09:22,750
Então agora, finalmente, acabaremos nesse bloco de captura e agora,

111
00:09:23,080 --> 00:09:29,740
para mostrar nossos dados de erro, podemos adicionar outro estado - erro e definir erro, você pode nomear como

112
00:09:29,740 --> 00:09:30,250
quiser.

113
00:09:30,340 --> 00:09:38,690
Inicialmente isso é indefinido porque, inicialmente, não tenho erro, mas aqui, chamarei set error e defino-o

114
00:09:38,690 --> 00:09:41,540
como erro. mensagem, por exemplo, para

115
00:09:41,540 --> 00:09:43,670
a mensagem deste erro que estou recebendo.

116
00:09:46,500 --> 00:09:51,330
Ainda, é claro, quero definir o carregamento como false a partir de então, isso não

117
00:09:51,330 --> 00:09:52,330
muda, porque definitivamente

118
00:09:52,350 --> 00:09:58,920
não estamos mais carregando, mesmo que tenhamos um erro, mas agora também temos esse estado de erro que podemos usar, podemos

119
00:09:58,920 --> 00:10:01,490
usá-lo para verificar aqui. Se tivermos um

120
00:10:01,500 --> 00:10:08,820
erro, por isso, se isso for verdade, eu nem preciso continuar. Em vez disso, quero retornar meu conteúdo jsx centralizado aqui, mas

121
00:10:08,820 --> 00:10:10,130
ali, quero apenas gerar

122
00:10:10,140 --> 00:10:18,620
um texto onde digamos que ocorreu um erro, por exemplo , como isso. Se agora fizermos isso, você verá um botão

123
00:10:18,650 --> 00:10:20,290
giratório, mas o

124
00:10:20,320 --> 00:10:21,370
texto

125
00:10:21,380 --> 00:10:24,990
do erro será exibido. Agora, é claro, isso não permite que

126
00:10:24,990 --> 00:10:27,800
o usuário faça muito, agora podemos simplesmente navegar e voltar, mas

127
00:10:29,820 --> 00:10:36,820
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

128
00:10:36,820 --> 00:10:45,860
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

129
00:10:45,870 --> 00:10:49,810
permitir que o usuário lide com isso e aí você pode

130
00:10:49,920 --> 00:10:55,260
adicionar um manipulador onPress e Agora, para poder carregar novamente, na verdade pegarei essa

131
00:10:55,350 --> 00:10:58,770
função de carregamento de produtos aqui, a removerei do

132
00:10:58,770 --> 00:11:04,290
efeito e a tornarei uma função regular desse componente para que eu possa chamá-la de

133
00:11:04,290 --> 00:11:06,030
efeito de uso interno.

134
00:11:06,090 --> 00:11:10,740
Agora, no entanto, ele também precisa ser uma dependência e, portanto, para evitar um

135
00:11:10,800 --> 00:11:19,350
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

136
00:11:19,350 --> 00:11:20,920
aqui, onde a dependência

137
00:11:20,980 --> 00:11:21,870
é minha

138
00:11:21,870 --> 00:11:23,760
função de despacho, você também

139
00:11:23,800 --> 00:11:27,600
pode add set isLoading e set error, mas todas essas funções nunca

140
00:11:27,640 --> 00:11:32,440
serão alteradas, portanto, você também poderá omiti-las e, portanto, isso nunca será recriado, o que

141
00:11:32,440 --> 00:11:34,480
é bom, mas agora podemos usar

142
00:11:34,630 --> 00:11:37,930
produtos de carregamento como uma dependência aqui em uso e

143
00:11:37,960 --> 00:11:43,120
agora porque não está dentro da função use effect, podemos usar carregar produtos em qualquer outro

144
00:11:43,120 --> 00:11:45,750
lugar deste componente e a parte de qualquer

145
00:11:45,750 --> 00:11:51,700
outro lugar está aqui neste botão. Se pressionarmos isso, também quero acionar carregar produtos novamente e, por último,

146
00:11:52,000 --> 00:12:02,260
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

147
00:12:02,260 --> 00:12:07,590
importações, sim, eu já tive o botão importado, então vamos nos livrar da segunda importação, apenas importá-la

148
00:12:07,780 --> 00:12:09,480
uma vez e agora

149
00:12:09,520 --> 00:12:16,450
o que você verá é que isso realmente será recarregado, eventualmente lançar um erro e você pode pressionar tentar novamente para recarregá-lo,

150
00:12:16,460 --> 00:12:20,810
no entanto, sempre vemos a mensagem de erro simplesmente porque nunca limpamos o erro

151
00:12:20,840 --> 00:12:22,850
e, se houver um erro, sempre

152
00:12:22,850 --> 00:12:25,220
retornamos isso, nem chegamos ao carregamento spinner.

153
00:12:25,220 --> 00:12:31,010
Portanto, devemos garantir que, sempre que carregarmos nossos produtos aqui, configuremos o erro novamente

154
00:12:31,010 --> 00:12:36,780
como nulo, para redefinir o erro. A propósito, várias chamadas de estado definido próximas umas das outras serão agrupadas

155
00:12:36,800 --> 00:12:39,550
em lotes pelo React, portanto, isso não levará a vários ciclos de

156
00:12:39,560 --> 00:12:41,730
re-renderização de componentes; é bom usá-lo dessa maneira.

157
00:12:41,750 --> 00:12:46,490
Então agora, se eu clicar em tentar novamente, podemos tentar novamente. Obviamente, isso nunca será bem-sucedido porque nosso URL

158
00:12:46,490 --> 00:12:53,540
está quebrado, mas ainda assim, é assim que podemos lidar com esse erro. Com isso, no entanto, voltarei às minhas ações e

159
00:12:53,540 --> 00:12:57,610
corrigirei esse erro corrigindo este URL novamente e agora isso também

160
00:12:57,740 --> 00:13:00,560
deve carregar nossos dados corretamente e exibi-los.