1
00:00:02,290 --> 00:00:08,140
Nossa abordagem aqui, é claro, funciona. Estamos armazenando as entradas em algum estado,

2
00:00:08,140 --> 00:00:16,090
armazenando a validade em algum estado e poderíamos fazer esse gerenciamento de validade para todas as nossas entradas aqui e simplesmente ter

3
00:00:16,120 --> 00:00:21,370
nossas diferentes funções de manipulador de alterações aqui para nossas diferentes entradas, que funcionariam.

4
00:00:21,370 --> 00:00:26,560
Uma observação importante a propósito antes de prosseguirmos, já que eu verifico a validade do título aqui no

5
00:00:26,770 --> 00:00:29,950
manipulador de envio, é claro que também devemos adicioná-la como

6
00:00:29,950 --> 00:00:35,820
uma dependência, para que o título seja válido deve ser adicionado lá como uma dependência no retorno de chamada de

7
00:00:35,830 --> 00:00:36,980
uso matriz de

8
00:00:37,030 --> 00:00:40,570
dependência, isso é importante; caso contrário, essa função não será reconstruída quando

9
00:00:40,660 --> 00:00:47,970
a validade for alterada, o que significa que não poderemos enviá-la posteriormente. O problema com nossa abordagem atual é que

10
00:00:47,970 --> 00:00:55,410
gerenciamos diferentes estados para armazenar as entradas para as diferentes entradas e, em seguida, também temos diferentes estados de

11
00:00:55,410 --> 00:01:00,910
validade, pelo menos potencialmente se começarmos a gerenciar nossa validade, assim e para

12
00:01:00,990 --> 00:01:07,400
formas muito grandes, é claro que isso significa muita cópia e colagem, muita administração do estado.

13
00:01:07,410 --> 00:01:15,300
Agora, se você tiver tantos estados que estão meio conectados, também poderá fazer isso de uma maneira mais elegante. Em

14
00:01:15,330 --> 00:01:18,500
vez de ter estados separados para cada entrada,

15
00:01:18,540 --> 00:01:25,720
você poderá ter um grande estado que mescla todos os valores de entrada e que mescla todas as

16
00:01:25,740 --> 00:01:33,720
validades. e, em seguida, use um conceito chamado redutor, não um redutor Redux, mas um suportado pelo React, pronto para gerenciar

17
00:01:33,720 --> 00:01:34,710
esse estado.

18
00:01:34,710 --> 00:01:40,210
Você faz isso com o gancho de redutor de uso, que novamente não tem nada a ver

19
00:01:40,440 --> 00:01:47,550
com Redux, o conceito de redutor não é exclusivo do Redux, um redutor no final é apenas uma função que recebe entrada e

20
00:01:47,580 --> 00:01:52,800
cospe alguma saída e, portanto, o React também suporta isso. e você verá como pode usar isso

21
00:01:52,920 --> 00:01:54,190
nesta palestra agora.

22
00:01:54,900 --> 00:01:57,510
Então, qual é a ideia de um redutor? Agora, primeiro é importante entender que o

23
00:01:57,510 --> 00:02:03,030
redutor de uso é um gancho que ajuda você a ter um gerenciamento de estado. Geralmente, você o usa se tiver

24
00:02:03,090 --> 00:02:09,420
estados conectados ou um estado mais complexo e não desejar várias chamadas de estado de uso

25
00:02:09,600 --> 00:02:16,340
individual e muitos estados individuais que você gerencia. Você pode usar o redutor e aqui está como

26
00:02:16,350 --> 00:02:17,510
ele funciona.

27
00:02:19,060 --> 00:02:25,530
Você começa criando um redutor, digamos um redutor de formulário aqui, você pode nomear o que quiser e, por favor, note que eu

28
00:02:25,570 --> 00:02:29,020
o crio fora do meu componente de formulário, você pode fazê-lo lá,

29
00:02:29,020 --> 00:02:33,940
mas se não depender de adereços, você você pode fazer isso fora de lá para que isso não

30
00:02:33,940 --> 00:02:39,250
seja reconstruído a cada ciclo de re-renderização e você nem precisa usar o retorno de chamada, o que obviamente

31
00:02:39,280 --> 00:02:44,110
também custa algum desempenho se você o usar. Portanto, use-o fora de lá, construa-o

32
00:02:44,110 --> 00:02:49,690
fora de lá para evitar recriações desnecessárias dessa função e agora o redutor, assim como um

33
00:02:49,690 --> 00:02:57,100
redutor de Redux obtém o estado atual e uma ação, mas novamente não está relacionado ao Redux, não é usado pelo

34
00:02:57,360 --> 00:03:02,240
Redux, funções redutoras sempre funcionam como este. Agora, lá dentro, novamente como em um

35
00:03:02,310 --> 00:03:07,260
redutor Redux, porque, novamente, eles funcionam assim, você pode verificar diferentes tipos de ação e

36
00:03:07,260 --> 00:03:11,520
aqui eu quero verificar um tipo, isso também é só usar uma instrução

37
00:03:11,520 --> 00:03:12,680
if, você

38
00:03:12,690 --> 00:03:15,440
pode usar uma instrução switch case também e

39
00:03:15,750 --> 00:03:19,260
que eu verifique a ação. tipo aqui depende totalmente

40
00:03:19,290 --> 00:03:24,030
de mim, você pode nomear isso o que quiser, porque você será o responsável

41
00:03:24,030 --> 00:03:29,800
por despachar a ação posteriormente e aqui eu verifico a ação de atualização, que também é um

42
00:03:29,820 --> 00:03:39,050
identificador que eu escolhi e que, assim como no Redux, você também pode armazene esse identificador em uma constante autônoma aqui, para que você possa ter sua ação

43
00:03:39,620 --> 00:03:45,850
de atualização de redutor aqui, por exemplo, seu identificador de atualização de redutor assim e use-o aqui se

44
00:03:45,920 --> 00:03:48,260
quiser e pode nomear isso como quiser.

45
00:03:48,380 --> 00:03:57,180
Portanto, agora estou verificando esta ação e, se ocorrer, quero armazenar um valor de entrada e validá-lo, mas para entender isso,

46
00:03:57,340 --> 00:04:00,850
precisamos entender como usamos o redutor de formulário.

47
00:04:00,920 --> 00:04:05,510
Então, vamos deixar assim por um momento e descer para o componente

48
00:04:05,600 --> 00:04:08,950
em si. Começamos a configurar nosso estado de

49
00:04:08,960 --> 00:04:15,200
formulário aqui em baixo, então aqui eu quero chamar redutor de usuário e agora usar redutor. meu

50
00:04:15,200 --> 00:04:19,540
redutor de formulário que eu montei aqui e que ainda está inacabado.

51
00:04:19,940 --> 00:04:24,990
Use reducer também usa algum segundo argumento opcional, que é o estado inicial

52
00:04:24,990 --> 00:04:30,860
que você deseja passar e que pode ser qualquer coisa, mas aqui eu passo um objeto

53
00:04:30,860 --> 00:04:38,630
Javascript e o estado inicial que eu quero usar aqui é no final um objeto que possui valores de entrada, que

54
00:04:38,630 --> 00:04:39,990
são outro objeto

55
00:04:40,220 --> 00:04:46,670
aninhado que em breve preencherei, validades de entrada que também são objetos aninhados e talvez uma validade

56
00:04:46,670 --> 00:04:49,610
geral do formulário, o nome do formulário

57
00:04:49,620 --> 00:04:55,700
é válido, o que inicialmente é falso, digamos. Portanto, este é agora o meu estado inicial que passo aqui e

58
00:04:55,700 --> 00:05:03,260
esse é o estado que mais tarde quero mudar de dentro do redutor de formulário. Agora, sobre os valores de entrada, podemos, por exemplo, adicionar nosso título e

59
00:05:03,260 --> 00:05:06,070
isso depende de você como o nomeia, que

60
00:05:06,070 --> 00:05:11,150
é uma string vazia, digamos inicialmente, esses serão os valores iniciais que eu quero definir nas minhas entradas.

61
00:05:11,150 --> 00:05:15,980
fim substitua meu gerenciamento de estado lá em baixo, onde armazeno manualmente minhas entradas em diferentes estados.

62
00:05:15,980 --> 00:05:20,220
Agora vou mesclar tudo isso em um objeto gerenciado através desse redutor.

63
00:05:20,480 --> 00:05:25,610
Então, eu tenho meu título aqui e, na verdade, isso nem sempre está vazio, é claro, mas, na verdade,

64
00:05:25,610 --> 00:05:27,410
só está vazio se não tivermos

65
00:05:27,410 --> 00:05:31,140
um produto editado, então copio essa verificação de lá e a uso aqui.

66
00:05:31,370 --> 00:05:34,590
Agora o mesmo, é claro, para o imageUrl, eu

67
00:05:35,410 --> 00:05:40,150
inicializo isso com o EditProduct. imageUrl, se estiver disponível, caso contrário, uso

68
00:05:40,150 --> 00:05:40,930
uma

69
00:05:40,930 --> 00:05:43,540
string vazia, basicamente o que fiz lá também.

70
00:05:44,110 --> 00:05:48,030
E é claro que faço o mesmo para a descrição, aqui

71
00:05:48,070 --> 00:05:52,990
quero verificar se o produto editado está definido e utilizo essa descrição ou defina-o

72
00:05:53,080 --> 00:05:59,410
como uma sequência vazia, se não estiver disponível. Agora, por último, mas não menos importante, temos o preço

73
00:05:59,410 --> 00:06:02,450
e sempre tenho uma string vazia porque não precisamos dela

74
00:06:02,470 --> 00:06:05,830
no caso de um produto editado, então não me importo com

75
00:06:05,860 --> 00:06:08,140
seu valor ou precisamos dele, bem

76
00:06:08,140 --> 00:06:15,020
então eu quero inicializá-lo com um valor vazio de qualquer maneira. Agora, é claro que cada entrada também tem uma validade, para que possamos adicionar

77
00:06:15,020 --> 00:06:16,790
um título aqui e novamente verificar se

78
00:06:16,850 --> 00:06:19,010
o EditProduct está definido, se estiver definido, então eu

79
00:06:19,040 --> 00:06:21,320
sei que estou editando, então teremos pré-preenchido o título,

80
00:06:21,320 --> 00:06:22,700
portanto, inicialmente ser válido,

81
00:06:22,700 --> 00:06:24,950
portanto, neste caso, meu valor inicial seria verdadeiro, caso

82
00:06:24,950 --> 00:06:32,250
contrário, será falso e agora isso também é algo que podemos repetir para o imageUrl. Se tivermos um produto editado, sabemos que ele

83
00:06:32,250 --> 00:06:33,080
foi

84
00:06:33,080 --> 00:06:36,650
pré-preenchido e, portanto, será válido inicialmente; portanto, configuramos

85
00:06:36,650 --> 00:06:39,550
como true, caso contrário, defino-o como false.

86
00:06:39,740 --> 00:06:44,420
Para a minha descrição aqui, é o mesmo - verdadeiro ou falso e,

87
00:06:44,540 --> 00:06:46,760
pelo preço, é quase igual,

88
00:06:46,760 --> 00:06:49,090
é claro que não preenchemos o preço

89
00:06:49,100 --> 00:06:55,200
se estivermos editando, mas se estivermos editando, não me importo com o preço. porque não será mutável.

90
00:06:55,310 --> 00:07:00,890
Portanto, eu sei que, se estiver editando, devo tratá-lo como válido, pois não pode ser alterado de qualquer

91
00:07:00,890 --> 00:07:02,420
maneira e, portanto, não

92
00:07:02,440 --> 00:07:09,680
me importo com essa entrada, mas não quero bloquear o envio de formulários, pois defini-lo como falso quando não pode editá-lo de qualquer maneira.

93
00:07:09,980 --> 00:07:13,110
Então, definirei como true se não for planejado editar, se não estivermos

94
00:07:13,190 --> 00:07:18,770
editando um produto, mas adicionando um, o preço será editável e, portanto, iniciaremos em um estado falso porque a entrada de preço

95
00:07:18,770 --> 00:07:24,230
será estar vazio inicialmente, é isso que estamos criando aqui. E agora a validade geral do formulário, bem

96
00:07:24,320 --> 00:07:26,150
lá novamente, posso verificar se

97
00:07:26,150 --> 00:07:31,130
temos um produto editado, o que significa que estamos editando, então o formulário é verdadeiro, o

98
00:07:31,130 --> 00:07:33,590
formulário é válido inicialmente, caso contrário, é

99
00:07:33,590 --> 00:07:39,240
falso inicialmente se estivermos adicionando um novo produto . Agora, este é o meu estado inicial

100
00:07:39,260 --> 00:07:45,050
aqui, agora essa função redutora deve poder mudar esse estado quando as ações são despachadas

101
00:07:45,050 --> 00:07:48,660
e uma ação deve ser despachada, independentemente do que

102
00:07:48,730 --> 00:07:58,190
digitarmos em uma de nossas entradas de texto, que será o gatilho. Portanto, agora podemos nos livrar de todas essas atribuições de estado aqui e, portanto,

103
00:07:58,220 --> 00:08:05,780
também podemos nos livrar de toda a importação de estado de uso e garantir a expedição da ação de atualização do redutor

104
00:08:05,790 --> 00:08:09,610
para cada pressionamento de tecla que fazemos em uma entrada.

105
00:08:09,710 --> 00:08:18,670
Então aqui no manipulador de mudança de título, no fim, removerei esse código, deixarei o if check por enquanto, mas não terei nenhum código lá no

106
00:08:18,740 --> 00:08:22,770
momento. Em vez disso, quero enviar a atualização do redutor e agora

107
00:08:22,790 --> 00:08:28,960
isso é feito com o resultado da chamada de redutor de uso, porque o redutor de uso certamente

108
00:08:28,960 --> 00:08:35,000
retorna algo, assim como o estado de uso. Ele também retorna uma matriz com exatamente dois

109
00:08:35,000 --> 00:08:40,710
elementos e, portanto, podemos desestruturá-la com esta sintaxe de desestruturação da matriz, que também usamos no estado

110
00:08:40,730 --> 00:08:47,450
de uso, e lá recebo meu estado do formulário como um primeiro valor e uma função de despacho como um

111
00:08:47,450 --> 00:08:48,250
segundo valor.

112
00:08:48,290 --> 00:08:55,280
É sempre isso que o redutor de uso retornará, um instantâneo de estado que é atualizado sempre que você o altera,

113
00:08:55,280 --> 00:08:55,770
portanto,

114
00:08:55,790 --> 00:09:01,490
sempre que você o altera, este componente é renderizado novamente e fornece um novo instantâneo de estado

115
00:09:01,550 --> 00:09:07,160
e uma função, despachar no final é uma função que permite despachar ações contra esse redutor.

116
00:09:07,250 --> 00:09:11,760
Claro, você pode nomear esses dois elementos da maneira que quiser, mas acho que esse

117
00:09:11,780 --> 00:09:13,270
é um nome sensato,

118
00:09:13,280 --> 00:09:20,100
esse é o instantâneo do nosso estado, essa é uma função. Agora despacho a propósito é um nome que eu já usei aqui no

119
00:09:20,100 --> 00:09:24,460
Redux, então aqui vou nomear esse estado do formulário de despacho para evitar um conflito de nomes,

120
00:09:24,480 --> 00:09:25,980
você pode nomeá-lo como quiser.

121
00:09:26,760 --> 00:09:33,350
Portanto, o estado do formulário de despacho agora pode ser usado aqui no meu manipulador de alterações de título, basta chamá-lo

122
00:09:33,410 --> 00:09:39,170
e preciso passar um objeto para lá que descreva minha ação e esse objeto terá uma propriedade de

123
00:09:39,170 --> 00:09:40,820
tipo, você não precisa

124
00:09:40,820 --> 00:09:46,130
ter uma propriedade de tipo , você pode nomear esse ID ou identificador ou o que quiser,

125
00:09:46,130 --> 00:09:52,010
mas eu uso type aqui porque, na verdade, verifico a propriedade type dentro da minha função redutora e essa

126
00:09:52,010 --> 00:09:59,260
função redutora será executada para cada nova ação que você enviar. Então, se eu voltar lá em baixo, o tipo será

127
00:09:59,500 --> 00:10:07,650
atualização redutora ou talvez um nome melhor seja atualização de formulário, eu acho, então é isso que eu vou usar aqui, é

128
00:10:07,650 --> 00:10:10,830
claro e aqui, então, atualização de formulário, talvez

129
00:10:10,830 --> 00:10:18,750
entrada de formulário update, o nome do curso depende de você, mas deve ficar claro sobre o que ele faz; portanto, aqui

130
00:10:18,750 --> 00:10:19,790
também terei

131
00:10:19,800 --> 00:10:22,110
atualização de entrada de formulário, sim,

132
00:10:22,180 --> 00:10:23,280
isso parece bom.

133
00:10:23,280 --> 00:10:24,510
Então, na atualização de

134
00:10:24,510 --> 00:10:26,120
entrada de formulário, foi o que

135
00:10:26,130 --> 00:10:27,600
eu enviei lá em baixo,

136
00:10:27,600 --> 00:10:33,100
precisamos alterá-lo aqui também e, é claro, você também pode passar quaisquer outros dados que queira usar dentro do seu

137
00:10:33,210 --> 00:10:38,250
redutor e eu tenho outros dados que quero usar. Esse seria o valor e vou apenas nomear esse

138
00:10:38,250 --> 00:10:39,270
valor aqui, essa

139
00:10:39,300 --> 00:10:40,730
propriedade, você pode nomear como

140
00:10:40,740 --> 00:10:42,390
quiser, esse é o texto

141
00:10:42,420 --> 00:10:48,490
que foi digitado, então eu o encaminhei ao redutor para que possamos armazená-lo em nosso estado lá e a validade

142
00:10:48,490 --> 00:10:49,400
dessa entrada.

143
00:10:49,470 --> 00:11:02,110
Portanto, aqui, na verdade, adicionarei um prop válido, que inicialmente vamos dizer que é falso e agora removerei esse caso e verificarei se somos maiores que zero aqui, o que significaria

144
00:11:02,110 --> 00:11:07,480
que deveria ser verdade, porque então defini como válido igual a true, caso

145
00:11:07,480 --> 00:11:12,850
contrário, permanecerá falso e, com isso, também podemos adicionar é válido como

146
00:11:12,850 --> 00:11:19,050
uma chave para a ação e encaminhar o valor armazenado dentro de nossa variável é

147
00:11:19,060 --> 00:11:20,230
válida e

148
00:11:20,350 --> 00:11:26,320
isso será falso inicialmente, mas se o tamanho da entrada para o título é

149
00:11:26,320 --> 00:11:35,230
maior que zero, então será realmente verdade e agora é claro que também precisamos informar nosso redutor sobre qual entrada acionou isso.

150
00:11:35,330 --> 00:11:43,730
Então, adicionarei um campo de ID de entrada aqui ou apenas insira, o que você quiser e use o título aqui e essa chave

151
00:11:43,730 --> 00:11:49,670
aqui deve ser uma chave que você também tenha dentro do seu estado, como aqui nos valores

152
00:11:49,790 --> 00:11:54,800
e validades de entrada, porque isso permitirá você deve escrever um código redutor que

153
00:11:54,890 --> 00:12:01,920
faremos em breve que seja altamente reutilizável e altamente flexível, porque agora podemos dar o próximo passo e garantir que

154
00:12:01,920 --> 00:12:09,210
transformemos isso em uma função que realmente funciona para todas as entradas e que seja realmente flexível em relação a como

155
00:12:09,210 --> 00:12:10,080
a usamos.