1
00:00:02,390 --> 00:00:07,550
Agora, com essa ação sendo despachada, podemos ir ao redutor e escrever algum código aqui na alteração de entrada, e esse

2
00:00:08,170 --> 00:00:09,440
é um código muito simples.

3
00:00:09,440 --> 00:00:18,650
Retornamos um novo estado em que copio meu antigo estado e desejo atualizar o valor com a ação. value porque value é uma propriedade que tenho nesta ação,

4
00:00:19,400 --> 00:00:25,650
a outra é isValid e essa é a outra coisa que também quero atualizar

5
00:00:25,650 --> 00:00:30,710
a cada pressionamento de tecla, isValid para esta entrada, não para todo

6
00:00:30,710 --> 00:00:38,420
o formulário, mas para essa entrada gerenciada internamente. Não atualizarei o que foi tocado aqui; em vez disso, o tocado deve

7
00:00:38,930 --> 00:00:43,490
ser atualizado quando realmente perdermos o foco, porque isso significa que o usuário acabou de inserir o

8
00:00:43,490 --> 00:00:52,550
conteúdo no momento. Portanto, agora eu quero marcar isso como tocado e, possivelmente, mostrar erros de validação. Portanto, aqui, o manipulador de foco perdido é uma

9
00:00:52,580 --> 00:00:56,690
função que eu adiciono e lá, enviarei uma

10
00:00:59,970 --> 00:01:01,890
ação. Agora, criarei

11
00:01:01,890 --> 00:01:04,470
um identificador de ação aqui, desfoque

12
00:01:04,710 --> 00:01:16,170
de entrada como este, desfoque de entrada como este e agora podemos despachar desfoque de entrada aqui, não precisamos anexar nenhum dado e agora em nosso redutor, podemos usar

13
00:01:16,170 --> 00:01:24,060
que em outro caso, input blur e, se for esse o caso, retorno um novo estado em que copio o

14
00:01:24,060 --> 00:01:29,280
estado antigo, porque quero manter o valor e é válido e não alterar

15
00:01:29,280 --> 00:01:36,620
isso, mas quero definir como true, para que assim seja quando desfocamos uma entrada, ela é tratada como tocada.

16
00:01:36,750 --> 00:01:44,110
Agora, apenas precisamos conectar esta função, portanto, definirei o ouvinte onBlur aqui e apontei o manipulador de foco perdido, para que isso

17
00:01:44,110 --> 00:01:46,870
seja acionado quando essa entrada ficar embaçada.

18
00:01:49,850 --> 00:01:57,100
Agora isso é legal e isso gerenciará o estado dentro dessa entrada, é claro que

19
00:01:57,190 --> 00:02:03,370
ainda preciso encaminhar o valor e as informações, sejam válidas ou não,

20
00:02:03,370 --> 00:02:14,700
para meus pais, portanto, para a tela de edição de produtos. Portanto, o que podemos fazer é adicionar efeito de uso aqui como uma importação

21
00:02:14,700 --> 00:02:15,310
no

22
00:02:18,430 --> 00:02:28,070
componente de entrada e talvez adicioná-lo aqui e na função de efeito de uso. Quero chamar uma função que espero obter por meio

23
00:02:28,130 --> 00:02:40,980
de adereços, talvez na alteração de entrada, O nome é sua e apenas executarei isso e encaminhará meu valor de estado de entrada e meu estado de entrada é uma informação

24
00:02:40,980 --> 00:02:48,540
válida, para que no componente pai possamos adicionar uma função aqui que ouça no final, que é acionada,

25
00:02:48,540 --> 00:02:53,790
que recebe esses dois argumentos e depois no pai, para que no componente

26
00:02:53,790 --> 00:03:00,310
de tela possamos atualizar nosso estado lá. Agora, o importante é quando esse efeito de uso deve

27
00:03:00,310 --> 00:03:07,420
ser executado e não deve ser executado após cada pressionamento de tecla? Em vez disso, isso deve ser executado sempre

28
00:03:07,420 --> 00:03:17,780
que o valor do estado de entrada ou as alterações válidas, é claro, porque é disso que dependemos ou para ser mais preciso, podemos enviar

29
00:03:17,780 --> 00:03:25,910
essas informações apenas se o estado de entrada tocado for verdadeiro, caso contrário, o componente pai pode não se importar.

30
00:03:26,100 --> 00:03:31,680
Portanto, agora nossa dependência aqui é todo o estado de entrada, porque usamos todos os valores, mas ainda assim

31
00:03:31,680 --> 00:03:36,600
acionaremos essa função no componente pai se tocado for verdadeiro; portanto, esse efeito será executado com

32
00:03:36,600 --> 00:03:42,240
mais frequência, mas na maioria das vezes não fará nada desde que o toque não seja verdadeiro e os adereços,

33
00:03:42,480 --> 00:03:49,170
claro, também sejam nossa dependência, agora, para evitar um loop infinito de renderização aqui, podemos usar a sintaxe de desestruturação do objeto e

34
00:03:49,650 --> 00:03:56,640
usar a alteração de entrada, para que, se outros adereços mudarem, não o façamos. reafirmar esse efeito, porque na mudança de entrada é o

35
00:03:56,640 --> 00:04:01,890
que precisamos lá em baixo e agora podemos acrescentar que isso é uma dependência e outras coisas, outras

36
00:04:01,890 --> 00:04:03,820
alterações nos acessórios não acionarão isso.

37
00:04:04,260 --> 00:04:10,620
Então agora chamamos isso no componente pai sempre que isso é tocado e depois encaminhamos o valor e a

38
00:04:10,650 --> 00:04:13,470
validade dessa entrada para o componente pai.

39
00:04:16,680 --> 00:04:23,400
Então, agora vamos usar isso na tela de edição do produto. Lá, em nossas entradas, como na entrada do título, podemos adicionar

40
00:04:23,400 --> 00:04:29,670
o suporte de alteração de entrada e esse é o suporte que eu alvo aqui, então você precisa acertar essa

41
00:04:29,670 --> 00:04:34,230
nomeação e isso espera obter uma função como um valor que, por sua vez, receberá

42
00:04:34,230 --> 00:04:38,140
dois argumentos quando chamado - o valor e a validade dessa entrada.

43
00:04:38,220 --> 00:04:44,490
Então, aqui eu quero apontar para uma função e essa pode ser nossa, digamos, manipulador de alterações de entrada, podemos reciclar

44
00:04:44,490 --> 00:04:46,910
isso, apenas o renomeio para ser mais adequado.

45
00:04:47,130 --> 00:04:55,070
Portanto, o manipulador de alterações de entrada pode ser acionado aqui, assim, ainda quero passar meu identificador, porque

46
00:04:55,100 --> 00:04:59,930
quero reutilizar isso para todas as minhas entradas e agora que

47
00:04:59,930 --> 00:05:07,940
estou no componente de tela, teremos várias entradas e , obtemos nosso identificador e obtemos o valor e as

48
00:05:07,940 --> 00:05:09,410
informações válidas, certo?

49
00:05:09,410 --> 00:05:15,740
Então, valor de entrada e validade de entrada, é o que obtemos, certo, porque é

50
00:05:15,740 --> 00:05:19,940
o que encaminhamos de dentro do componente de entrada aqui,

51
00:05:19,940 --> 00:05:22,510
é o que passamos para

52
00:05:22,580 --> 00:05:31,110
isso na função de alteração de entrada. Portanto, aqui, não precisamos validar, precisamos apenas encaminhar essas informações. Encaminhamos o valor de entrada, encaminhamos a validade da

53
00:05:31,110 --> 00:05:38,310
entrada e isso só acontece quando a entrada é tocada pelo caminho. Portanto, quando ela perde o foco e, é claro, isso

54
00:05:38,310 --> 00:05:38,760
é

55
00:05:38,790 --> 00:05:40,320
apenas uma restrição que

56
00:05:43,310 --> 00:05:48,010
adicionei aqui, você precisa perder o foco. Obviamente, você também pode ir para o

57
00:05:48,020 --> 00:05:53,060
componente de entrada e removê-lo se verificar para atualizar a validade e o valor no componente

58
00:05:53,060 --> 00:05:59,260
pai para cada entrada, para cada pressionamento de tecla. Agora, mais uma coisa que quero fazer, quero agrupar

59
00:05:59,260 --> 00:06:07,390
isso em uma chamada de retorno de chamada de uso aqui, para que esta função não seja reconstruída desnecessariamente porque lembre-se de que passamos essa

60
00:06:07,510 --> 00:06:13,050
função para a alteração de entrada no componente de entrada e lá por outro lado, isso é

61
00:06:13,060 --> 00:06:13,630
uma

62
00:06:13,630 --> 00:06:15,400
dependência desse efeito; portanto, esse

63
00:06:15,430 --> 00:06:18,190
efeito será executado novamente sempre que isso mudar.

64
00:06:18,190 --> 00:06:22,780
Portanto, não deve mudar com muita frequência para evitar execuções desnecessárias de efeitos

65
00:06:22,810 --> 00:06:28,900
e, portanto, precisamos declarar nossas dependências, e a única dependência que temos é o estado do formulário

66
00:06:29,080 --> 00:06:31,690
de despacho que nunca será alterado, portanto,

67
00:06:31,690 --> 00:06:32,430
somos

68
00:06:32,430 --> 00:06:35,620
bons, isso nunca deve ser reconstruído porque o lógica

69
00:06:35,680 --> 00:06:43,690
lá não muda, obtemos todos os valores que precisamos como argumentos. Com isso na minha tela de edição de produtos, ainda tenho meus formulários que, é claro, com todos os valores e validades dos formulários, mas eu apenas gerencio

70
00:06:50,310 --> 00:06:55,600
isso aqui porque eu preciso enviá-lo mais tarde e porque eu preciso derivar a validade geral do formulário. Não faço isso porque preciso

71
00:06:55,600 --> 00:06:58,280
gerenciar todas as entradas aqui, fazemos

72
00:06:58,390 --> 00:07:05,100
isso de dentro do componente de entrada. Para envio e assim por

73
00:07:05,100 --> 00:07:06,460
diante, ainda

74
00:07:06,500 --> 00:07:18,810
precisamos das informações sobre todas as lojas, no entanto, o valor. Agora, se eu voltar para a entrada, não esqueça que você também precisa definir o valor

75
00:07:19,320 --> 00:07:22,600
inicial prop e se esse valor deve

76
00:07:22,680 --> 00:07:31,290
ser inicialmente válido; portanto, se eu voltar para a tela de edição do produto, agora definiremos o valor inicial aqui para que?

77
00:07:31,320 --> 00:07:35,640
Bem, podemos verificar se temos um produto editado e, se tivermos, o valor inicial aqui deve

78
00:07:35,640 --> 00:07:37,150
ser editadoProduct. title,

79
00:07:37,170 --> 00:07:44,760
caso contrário, é uma string vazia e isso deve ser válido inicialmente; portanto, use este

80
00:07:45,480 --> 00:07:47,480
prop aqui se tivermos

81
00:07:49,830 --> 00:07:51,860
um produto editado; se

82
00:07:51,870 --> 00:08:00,780
for, com o double bang aqui, se for verdade. Se não temos um produto editado, isso não pode ser válido inicialmente,

83
00:08:00,780 --> 00:08:01,530
então

84
00:08:01,530 --> 00:08:03,390
passo falso o que é

85
00:08:03,390 --> 00:08:07,210
bom, e é exatamente o que deve ser o caso.

86
00:08:07,280 --> 00:08:13,040
Agora podemos copiar essas duas linhas, também para o imageUrl, é claro que encaminhamos o valor do URL da

87
00:08:13,040 --> 00:08:20,400
imagem como um valor padrão, além disso, ele pode permanecer assim. Para o preço, nunca teremos um valor inicial

88
00:08:20,400 --> 00:08:25,650
e nunca será válido inicialmente. Para descrição, por outro lado, podemos

89
00:08:25,660 --> 00:08:28,950
novamente adicionar isso e aqui apontar para descrição.

90
00:08:32,270 --> 00:08:39,050
Agora, com isso, há uma coisa que eu preciso corrigir no componente de entrada que também pensei, é claro que

91
00:08:39,050 --> 00:08:43,450
aqui, o estado do formulário não está mais disponível. Em vez disso, temos

92
00:08:43,450 --> 00:08:47,950
nosso estado interno aqui e nomeei esse estado de entrada, que é o que

93
00:08:47,960 --> 00:08:49,870
meu redutor retorna, então devemos

94
00:08:50,120 --> 00:08:51,700
usá-lo aqui, é claro.

95
00:08:51,700 --> 00:08:57,830
Então aqui temos inputState. valor como um valor, é tão simples

96
00:08:57,920 --> 00:09:03,590
quanto isso e aqui temos inputState. isValid como uma verificação e isso deve ser tudo.

97
00:09:03,590 --> 00:09:10,060
Agora, se salvarmos isso e dar uma olhada nisso, vamos ver se isso funciona. Se formos aqui, temos todas as mensagens de erro

98
00:09:10,060 --> 00:09:13,360
inicialmente, o que faz sentido, porque todas são inválidas inicialmente.

99
00:09:13,790 --> 00:09:20,500
Se eu começar a digitar aqui, recebo um erro, não consigo encontrar a variável isValid no meu componente de entrada, que

100
00:09:20,500 --> 00:09:26,910
deve estar em aquele manipulador que dispara a cada pressionamento de tecla, provavelmente aqui, sim no redutor, é claro que

101
00:09:26,920 --> 00:09:30,000
devo verificar a ação.

102
00:09:30,000 --> 00:09:32,490
isValid, não apenas isValid, tenho que

103
00:09:32,730 --> 00:09:37,470
obter isso da ação. Portanto, com essa correção

104
00:09:37,480 --> 00:09:42,240
aqui, vamos voltar e tentar novamente. Se eu começar a digitar, isso será

105
00:09:42,270 --> 00:09:46,530
limpo. Se eu reverter isso, meu erro não volta, portanto, é um

106
00:09:46,530 --> 00:09:50,800
pequeno erro que precisaremos corrigir. Pelo preço, 0 não é

107
00:09:50,800 --> 00:09:55,330
tratado como válido, também não é, portanto, a validação tem alguns

108
00:09:55,350 --> 00:09:58,590
problemas, mas entrar e assim por diante funciona,

109
00:09:58,590 --> 00:10:03,490
mas vamos ver o que há de errado com a validação agora.

110
00:10:03,500 --> 00:10:07,090
Bem, é claro que a validação funciona aqui, não a estamos usando.

111
00:10:07,100 --> 00:10:12,290
Lembre-se de que eu sempre verifico se esse tipo de validação está ativado para essa entrada ou esse tipo ou esse tipo e fazemos

112
00:10:12,290 --> 00:10:17,000
isso com a ajuda desses acessórios especiais que precisamos definir. No momento, nenhuma validação

113
00:10:17,030 --> 00:10:22,980
está ativada, portanto, apenas os valores inválidos padrão são levados em consideração.

114
00:10:23,060 --> 00:10:28,610
Portanto, se eu for para a tela de edição do produto, agora habilitaremos essa validação especial definindo os

115
00:10:28,610 --> 00:10:39,170
adereços certos, por exemplo aqui na entrada do título, necessários. No imageUrl, também necessário. No preço aqui, obrigatório e também talvez

116
00:10:39,470 --> 00:10:47,540
min igual a zero, de modo que zero é o número mínimo que precisamos inserir ou um

117
00:10:47,540 --> 00:10:48,350
número

118
00:10:48,380 --> 00:10:58,480
maior que isso, na verdade, talvez 0. 1 é o nosso número mínimo. Para a descrição, também deve ser necessário e talvez também o comprimento

119
00:10:58,540 --> 00:11:05,100
mínimo seja igual a 5, para ter pelo menos 5 caracteres. Há também uma coisa adicional que precisamos fazer aqui na tela

120
00:11:05,100 --> 00:11:11,070
de edição do produto. Isso, no manipulador de alterações de entrada, também precisa ser adicionado a todas as entradas,

121
00:11:11,130 --> 00:11:16,870
é claro, não apenas à entrada do título. Portanto, precisamos adicionar isso para o

122
00:11:16,870 --> 00:11:26,760
imageUrl, caso contrário, obteremos um erro mais tarde, precisaremos adicionar isso aqui à entrada de preço, também precisaremos adicionar isso aqui, obviamente, à entrada

123
00:11:26,760 --> 00:11:30,580
de descrição e substituir o identificador no caminho certo.

124
00:11:32,810 --> 00:11:36,010
Então, vamos testar isso e você notará algo estranho,

125
00:11:36,040 --> 00:11:39,000
se você digitar aqui, que funciona, se você

126
00:11:39,000 --> 00:11:41,210
digitar imageUrl, não funcionar corretamente,

127
00:11:41,220 --> 00:11:47,300
a validação não será atualizada e você não poderá voltar, pelo menos isso pode estar preso.

128
00:11:47,310 --> 00:11:54,990
Portanto, se recarregarmos isso com erro de comando ou pressionar duas vezes R no Android e fizermos outra tentativa aqui,

129
00:11:55,010 --> 00:12:00,950
digamos que o preço que você notará que isso funciona, mas por que não funciona

130
00:12:00,950 --> 00:12:05,630
e o mesmo seria o caso, a propósito? se você tentou

131
00:12:05,670 --> 00:12:10,200
no imageUrl, aqui isso funciona. Por que funciona se eu editei outra entrada anteriormente,

132
00:12:10,200 --> 00:12:15,100
porque agora, por exemplo, não funciona mais em um título? E o problema está relacionado a isso estar preso aqui.

133
00:12:15,390 --> 00:12:22,500
Estamos renderizando esse componente com muita frequência e é muito difícil rastrear o motivo disso.

134
00:12:23,010 --> 00:12:24,980
No final, temos uma espécie de loop infinito

135
00:12:24,990 --> 00:12:27,290
aqui e o problema é nosso manipulador de alterações de entrada.

136
00:12:27,420 --> 00:12:34,290
Estamos usando o retorno de chamada aqui para evitar recreação desnecessária, mas, ao vinculá-lo dessa maneira, tornamos

137
00:12:34,290 --> 00:12:40,710
isso obsoleto, não fazendo diferença agora, pois isso criará uma nova ligação de função para cada

138
00:12:40,800 --> 00:12:42,230
ciclo de repetição.

139
00:12:42,750 --> 00:12:49,590
Portanto, no final, o que precisamos fazer é remover o bind aqui, removê-lo aqui em todos esses lugares,

140
00:12:49,590 --> 00:12:51,550
pois isso interromperá nosso

141
00:12:51,780 --> 00:12:56,980
aplicativo, causará muitos ciclos de re-renderização, pois o retorno de chamada não terá efeito

142
00:12:57,210 --> 00:13:01,200
e, em vez disso, poderemos deseja encaminhar um ID prop

143
00:13:01,200 --> 00:13:05,850
do título e assim por diante para o nosso componente de entrada.

144
00:13:06,050 --> 00:13:14,200
Então, vamos adicionar isso em todas essas entradas, esse prop ID é basicamente o que eu adicionei na chamada de ligação antes, então apenas

145
00:13:14,260 --> 00:13:18,860
encaminhamos isso para o componente de entrada para que possamos usá-lo lá, vamos fazer

146
00:13:18,880 --> 00:13:23,430
isso para todas essas entradas aqui e agora como podemos usar isso?

147
00:13:23,470 --> 00:13:27,910
Bem dentro da entrada, agora temos esse suporte de ID

148
00:13:27,910 --> 00:13:30,820
disponível, para que possamos anexar isso.

149
00:13:30,880 --> 00:13:38,280
Então aqui podemos encaminhar adereços. id ou simplesmente ID, para que não tenhamos que adicionar adereços aqui

150
00:13:38,280 --> 00:13:44,370
e, em vez disso, retire o ID dos adereços aqui, exatamente como fizemos na alteração de entrada e adicione

151
00:13:44,470 --> 00:13:50,470
o ID como uma dependência desse efeito posteriormente. E agora, com isso, ainda encaminhamos o identificador

152
00:13:50,830 --> 00:13:55,630
dessa entrada, mas de uma maneira mais elegante, que evita o uso de bind,

153
00:13:55,630 --> 00:13:59,000
que no final recria essa função para cada ciclo

154
00:13:59,140 --> 00:14:03,430
de renderização e, portanto, leva a um loop infinito; portanto, agora, se

155
00:14:06,890 --> 00:14:15,490
recarregarmos isso e vá para a seção de administração aqui, agora eu posso inserir algo aqui e também aqui e agora isso funciona porque agora

156
00:14:15,490 --> 00:14:19,660
evitamos esse ciclo infinito de renderização e obtemos a validação como desejávamos.

157
00:14:19,690 --> 00:14:26,170
Portanto, agora essa é a minha abordagem ou a abordagem que eu queria mostrar aqui, que você pode usar para ter

158
00:14:26,170 --> 00:14:31,630
um componente de entrada reutilizável que faça sua própria validação, que você pode configurar de fora e onde

159
00:14:31,630 --> 00:14:33,960
você ainda pode gerenciar o formulário geral.

160
00:14:34,060 --> 00:14:36,120
Com isso, vamos nos aprofundar em

161
00:14:36,220 --> 00:14:42,070
alguns ajustes, como, por exemplo, estilizar essa mensagem de erro que estamos exibindo, essa mensagem de erro de validação e também

162
00:14:42,070 --> 00:14:45,310
controlar quando a exibimos, porque não quero mostrar isso o tempo todo.