1
00:00:02,220 --> 00:00:06,440
Para o recurso adicionar ao carrinho, precisamos trabalhar em duas coisas - é

2
00:00:06,450 --> 00:00:09,850
claro que podemos ter uma tela de carrinho, que temos

3
00:00:09,880 --> 00:00:17,250
um ícone aqui no cabeçalho que nos leva à tela do carrinho, onde podemos ver a soma total e os itens do carrinho

4
00:00:17,250 --> 00:00:20,640
e onde temos esse botão agora, mas eu diria que

5
00:00:20,640 --> 00:00:26,580
esse é o segundo passo, porque o primeiro passo mais importante é adicionarmos a lógica para gerenciar os

6
00:00:26,910 --> 00:00:33,030
itens do carrinho e isso envolve o Redux. Para isso, adicionarei um redutor novinho em

7
00:00:33,040 --> 00:00:40,620
folha, um segundo redutor que vou chamar de carrinho, carrinho. js e também um arquivo de ações, e agora esse é realmente

8
00:00:40,750 --> 00:00:43,280
um arquivo de ação que iremos preencher.

9
00:00:43,330 --> 00:00:45,270
Faremos isso com o arquivo de produtos mais

10
00:00:45,280 --> 00:00:52,250
tarde, assim que começarmos a adicionar produtos, mas por enquanto, vamos começar com o recurso de carrinho. Então aqui no

11
00:00:52,250 --> 00:00:55,010
carrinho. js na pasta reducers,

12
00:00:55,250 --> 00:01:00,350
vou configurar meu estado inicial para essa fatia de carrinho e, novamente, são todos esses redutores

13
00:01:00,350 --> 00:01:05,390
separados e os estados que eles conseguem compor a loja Redux total porque, no final, é

14
00:01:05,390 --> 00:01:11,420
isso que você combina aqui com combinado reduz em um redutor de raiz e um grande estado no final.

15
00:01:11,520 --> 00:01:16,150
Temos apenas esses sub-estados individuais para facilitar o gerenciamento dos dados.

16
00:01:16,230 --> 00:01:22,100
Então aqui no redutor do carrinho, como deve ser o estado do nosso carrinho?

17
00:01:22,500 --> 00:01:31,000
Bem, nosso carrinho terá um monte de itens, pode ser uma matriz e uma soma que inicialmente é zero, portanto, uma quantia total que você poderia dizer,

18
00:01:31,360 --> 00:01:35,680
é claro que também poderia nomear essa quantia talvez para deixar bem claro o

19
00:01:35,680 --> 00:01:36,720
que é isso.

20
00:01:36,730 --> 00:01:39,160
Portanto, essas são as duas coisas que compõem meu carrinho aqui e,

21
00:01:39,160 --> 00:01:45,460
como sempre, não posso enfatizar isso o suficiente, há mais de uma maneira de implementar isso. Portanto, se você deseja gerenciar alguns outros dados aqui

22
00:01:45,460 --> 00:01:47,350
também, definitivamente faça-o, não há

23
00:01:47,380 --> 00:01:48,480
uma abordagem

24
00:01:48,490 --> 00:01:50,920
única certa ou errada, essa é apenas

25
00:01:50,920 --> 00:01:53,330
a minha abordagem para criar este aplicativo.

26
00:01:53,410 --> 00:01:58,480
Agora é importante que, para este carrinho de compras aqui, quero ter certeza de que, se já

27
00:01:58,590 --> 00:02:02,120
tivermos um item no carrinho, digamos a camisa vermelha e clicar no

28
00:02:02,440 --> 00:02:09,340
carrinho de compras pela segunda vez, não adiciono dois itens a essa matriz, mas Eu ainda tenho apenas um item lá e, em vez

29
00:02:09,340 --> 00:02:15,850
disso, todos os itens nessa matriz de itens devem ser um objeto onde eu gerencie como o ID do produto, talvez, onde eu

30
00:02:15,850 --> 00:02:18,940
tenha o título e a quantidade do item no

31
00:02:18,970 --> 00:02:22,630
carrinho, para que então mude para 2 se eu clicar uma segunda vez.

32
00:02:22,720 --> 00:02:31,960
Portanto, você também pode argumentar que os itens talvez não devam ser uma matriz, mas talvez um objeto Javascript, porque isso nos permite armazenar o ID

33
00:02:32,170 --> 00:02:37,930
do produto como uma chave e o valor pode ser um objeto com o título, com

34
00:02:38,220 --> 00:02:42,420
a quantidade, com o preço e isso é apenas uma alternativa, você

35
00:02:42,470 --> 00:02:43,840
também pode fazer

36
00:02:43,840 --> 00:02:48,830
isso tudo com uma matriz, mas essa é realmente a abordagem que vou usar.

37
00:02:49,180 --> 00:02:54,190
Agora, o redutor que eu exporto, portanto, é um redutor que, obviamente, obtém um estado

38
00:02:54,190 --> 00:03:00,700
que tem nosso estado inicial como valor padrão e uma ação como argumento que, no final, precisa retornar alguns dados.

39
00:03:01,150 --> 00:03:04,890
Portanto, no final, ele precisa retornar um novo estado que é usado pelo Redux.

40
00:03:04,900 --> 00:03:07,210
Agora precisamos de uma ação para continuar.

41
00:03:07,660 --> 00:03:15,610
Então, aqui vou exportar uma constante, um identificador de ação e nomear esse item no carrinho, o identificador

42
00:03:15,610 --> 00:03:22,790
é com você, irei adicionar o carrinho como este e, no arquivo de ações, criarei tal função

43
00:03:22,780 --> 00:03:24,490
criador de ação.

44
00:03:24,610 --> 00:03:26,620
Então aqui está outra

45
00:03:26,650 --> 00:03:34,800
constante que vou nomear adicionar ao carrinho que recebe, digamos o objeto completo do produto que eu quero adicionar, para que eu

46
00:03:34,800 --> 00:03:40,260
possa extrair as informações necessárias e, aqui, precisamos retornar um objeto de ação que tem

47
00:03:40,260 --> 00:03:44,730
um tipo que é adicionar ao carrinho e, em seguida, nosso produto.

48
00:03:44,730 --> 00:03:50,010
Essa é apenas uma maneira de criar essas ações que torna muito simples fazer isso dentro

49
00:03:50,010 --> 00:03:51,240
de nossos componentes.

50
00:03:51,240 --> 00:03:56,970
Portanto, no final, no redutor do carrinho, em todos os redutores, na verdade, mas no local do redutor do carrinho onde

51
00:03:57,310 --> 00:03:58,010
nos importamos,

52
00:03:58,020 --> 00:04:06,180
obteremos a ação adicionar ao carrinho, então aqui precisamos mudar o tipo de ação e lidar com o caso em que é adicionado ao carrinho e, portanto, você deve

53
00:04:06,360 --> 00:04:07,950
importar adicionar ao carrinho dessa

54
00:04:07,950 --> 00:04:14,050
pasta de ações e, a partir daí, do arquivo do carrinho. Agora, a propósito, essa ação quando é despachada é recebida

55
00:04:14,070 --> 00:04:19,200
em todos os redutores, mas se você não lidar com ela com um caso separado, seu caso

56
00:04:19,200 --> 00:04:26,460
padrão será acionado, o que normalmente deve retornar sua fatia de estado atual para esse redutor, o que normalmente significa que a fatia de

57
00:04:26,460 --> 00:04:31,100
estado desse redutor não é alterada. Aqui, no entanto, no redutor do carrinho,

58
00:04:31,140 --> 00:04:34,550
é claro que quero mudar meu estado, portanto, eu mantenho

59
00:04:34,710 --> 00:04:36,750
a inclusão na caixa do carrinho

60
00:04:36,750 --> 00:04:39,660
aqui e agora na inclusão no carrinho, o que

61
00:04:39,660 --> 00:04:41,240
deve acontecer lá?

62
00:04:42,280 --> 00:04:50,720
Bem, obtemos nosso produto adicionado, podemos retirá-lo da ação porque, na ação, teremos uma chave do produto, foi o que acabamos

63
00:04:50,720 --> 00:04:51,750
de configurar

64
00:04:51,770 --> 00:04:56,040
aqui no carrinho de ação. arquivo js, então eu vou pegar nosso

65
00:04:56,060 --> 00:05:00,710
produto e o estou armazenando em um produto constante e adicionado aqui, com o qual podemos trabalhar

66
00:05:01,920 --> 00:05:08,910
agora e teremos o preço do produto aqui, que é, naturalmente, adicionadoProduto. preço e teremos o título do

67
00:05:08,940 --> 00:05:16,170
produto que é adicionadoProduto. título. Antes de continuarmos, vamos definir como

68
00:05:16,170 --> 00:05:21,460
o item do carrinho deve ser o que armazenamos aqui, o valor que temos lá.

69
00:05:21,650 --> 00:05:30,550
Então, vou para a pasta modelos e adiciono um item de carrinho. js aqui e, em seguida, adicione uma classe de

70
00:05:30,580 --> 00:05:32,650
item do carrinho que recebe

71
00:05:32,890 --> 00:05:39,370
um construtor e antes que eu esqueça novamente, que precisa ser exportado aqui

72
00:05:39,370 --> 00:05:46,750
e agora nesse construtor, espero obter a quantidade do produto que vamos adicionar, o preço

73
00:05:47,020 --> 00:05:56,950
do produto, título do produto e soma deste item, se tivermos três vezes a camisa vermelha, nossa soma será três vezes

74
00:05:56,950 --> 00:05:58,980
29. 99,

75
00:05:59,110 --> 00:06:01,690
aproximadamente US $ 90.

76
00:06:01,690 --> 00:06:10,220
Agora, o que não chego aqui é o ID do produto, porque vou usá-lo como uma chave dentro do meu objeto, cujos itens são

77
00:06:10,220 --> 00:06:13,440
mantidos e depois ficarão mais claros quando o implementarmos.

78
00:06:14,150 --> 00:06:17,690
Portanto, aqui no item do carrinho,

79
00:06:17,840 --> 00:06:22,890
apenas armazeno todos os dados que recebo, quantidade, preço do produto

80
00:06:22,900 --> 00:06:34,200
e tenho esses dados que precisam ser apresentados posteriormente, para que o título do produto e a soma, assim e agora de volta no redutor,

81
00:06:34,260 --> 00:06:41,520
é claro que podemos importar essa classe de item do carrinho da pasta modelos e do

82
00:06:41,520 --> 00:06:47,880
item do carrinho aqui e agora de volta ao estojo do carrinho, precisamos primeiro

83
00:06:47,980 --> 00:06:52,680
descobrir se esse produto já faz parte dos nossos itens.

84
00:06:52,680 --> 00:06:59,370
Agora, como mencionei, adicionarei todos os novos produtos adicionando uma nova chave aos itens que são o ID desse produto, já que

85
00:06:59,370 --> 00:07:01,020
isso é único, sempre temos

86
00:07:01,020 --> 00:07:06,870
cada chave apenas uma vez e, em seguida, o valor será um item do carrinho, conforme defini-lo em

87
00:07:07,110 --> 00:07:12,990
modelos e, portanto, eu sei se o ID do produto que estou recebendo aqui já é uma chave de

88
00:07:13,170 --> 00:07:17,050
itens, então isso já tem nosso item como um item de carrinho.

89
00:07:17,070 --> 00:07:26,190
Então, aqui, podemos simplesmente verificar se há itens para o produto adicionado. O ID existe; portanto, se isso retorna algo

90
00:07:26,200 --> 00:07:36,290
verdadeiro, não indefinido, já temos o item no carrinho, o que está bom, mas precisamos alterar a

91
00:07:36,290 --> 00:07:38,800
quantidade, caso contrário,

92
00:07:38,860 --> 00:07:41,600
precisamos adicionar um novo item.

93
00:07:41,600 --> 00:07:45,920
Então, vamos começar com o caso else, porque é o caso que encontraremos

94
00:07:45,920 --> 00:07:47,170
pela primeira vez

95
00:07:47,330 --> 00:07:51,910
quando adicionarmos algo pela primeira vez, é preciso um novo item de carrinho, eu

96
00:07:51,920 --> 00:07:58,460
crio isso com a nova palavra-chave e a classe de item de carrinho que defini e lá , precisamos fornecer

97
00:07:58,520 --> 00:08:00,530
a quantidade que obviamente é uma

98
00:08:00,920 --> 00:08:08,840
se adicionarmos um novo item, precisamos fornecer o preço do produto, o título do produto aqui e a soma e a soma do curso

99
00:08:09,050 --> 00:08:11,580
inicialmente é apenas o preço do produto, certo?

100
00:08:11,600 --> 00:08:17,810
Como se adicionarmos um item desse preço, a soma desse item do carrinho será o preço do produto e agora esse novo

101
00:08:17,810 --> 00:08:21,200
item do carrinho deverá ser adicionado aos itens do carrinho aqui.

102
00:08:24,100 --> 00:08:29,050
Então, aqui, retornamos uma cópia do nosso estado e definimos itens

103
00:08:29,220 --> 00:08:38,290
iguais a um novo objeto em que copio todos os meus itens de estado existentes, para que copie meu

104
00:08:38,290 --> 00:08:39,630
objeto de

105
00:08:39,640 --> 00:08:47,200
itens existente aqui e depois adiciono uma nova chave com esta sintaxe dinâmica com os colchetes

106
00:08:47,200 --> 00:08:55,280
em que o nome da chave é adicionadoProduct. ID, foi o que eu quis dizer com o ID do produto sendo a chave no

107
00:08:55,340 --> 00:08:59,190
objeto de nossos itens e o valor é o nosso novo item de carrinho.

108
00:08:59,390 --> 00:09:04,730
Esta é apenas uma sintaxe que você precisa conhecer, é Javascript básico, é assim que você pode adicionar ou acessar

109
00:09:04,730 --> 00:09:11,570
aqui uma propriedade dinâmica em vez de codificá-la como uma string aqui. A propósito, isso aqui em cima

110
00:09:11,600 --> 00:09:20,170
também deve ser estatal. itens, meu erro. Portanto, com isso, devemos adicionar um novo item de carrinho aqui.

111
00:09:20,230 --> 00:09:24,790
Agora, se você já possui um item no carrinho, é claro que não

112
00:09:24,790 --> 00:09:31,480
criamos um novo item, mas queremos atualizar o existente. Portanto, terei meu item de carrinho atualizado

113
00:09:31,480 --> 00:09:35,470
aqui e, para isso, ainda crio um novo item de

114
00:09:35,800 --> 00:09:46,960
carrinho, mas preencherei previamente com alguns dados existentes, por exemplo, a quantidade aqui. Nós obtemos isso dos itens de estado para o ID do produto adicionado, porque isso já deve fazer parte

115
00:09:46,960 --> 00:09:52,150
dos itens de estado, estamos verificando isso aqui e isso terá uma chave de quantidade, é claro,

116
00:09:52,150 --> 00:09:57,730
porque esse item aqui nos meus itens é apenas de digite itens de carrinho, para que ele tenha

117
00:09:57,730 --> 00:09:58,480
uma propriedade

118
00:09:58,600 --> 00:10:02,020
de quantidade e simplesmente adicionamos um a isso porque estamos adicionando

119
00:10:02,080 --> 00:10:09,560
um novo item de carrinho, então precisamos incrementá-lo. Agora, o item do carrinho como segundo argumento leva o preço do produto. Então, é claro, como criaremos o aplicativo

120
00:10:09,570 --> 00:10:14,540
de forma que o preço nunca mude, o que adicionaria muita complexidade aqui, teríamos que

121
00:10:14,550 --> 00:10:19,860
gerenciar o carrinho de uma maneira totalmente diferente nesse caso, teríamos que armazenar cada item do

122
00:10:19,890 --> 00:10:25,350
carrinho como um lista de transações para este item do carrinho que é demais para isso aqui.

123
00:10:25,350 --> 00:10:30,760
Então, como isso nunca muda, já que o preço nunca muda, no final, podemos apenas pegar

124
00:10:30,760 --> 00:10:36,930
o preço do produto que estamos recebendo ou o preço existente que armazenamos antes, porque isso nunca mais mudará.

125
00:10:36,930 --> 00:10:42,150
O título pode mudar e eu quero armazenar o título mais recente aqui, então, definitivamente, pegarei o

126
00:10:42,150 --> 00:10:46,620
produto que estamos chegando aqui, em vez do meu instantâneo antigo e, por último,

127
00:10:46,710 --> 00:10:51,480
mas não menos importante, o último valor aqui, minha soma total para este item do carrinho,

128
00:10:51,480 --> 00:10:59,520
é claro que é a soma atual, portanto, eu acesso itens de estado para o ID aqui, soma mais o preço do produto porque adicionamos um novo

129
00:10:59,520 --> 00:11:06,660
item aqui, precisamos adicionar o preço vezes 1 à soma atual. Esse é o item do

130
00:11:06,660 --> 00:11:08,570
carrinho atualizado.

131
00:11:08,580 --> 00:11:16,750
Agora, com isso, podemos retornar nossa nova fatia de estado aqui, copiando os estados antigos e definindo itens iguais e agora importantes

132
00:11:16,930 --> 00:11:26,460
para um objeto em que copiamos o estado. itens, mas onde agora definimos novamente o addedProduct. ID e sim, isso já existe, mas com

133
00:11:26,460 --> 00:11:33,310
isso simplesmente o substituímos por nosso item de carrinho atualizado, por isso fazemos a mesma atualização que

134
00:11:33,310 --> 00:11:37,070
fazemos lá em baixo. Agora que, no entanto,

135
00:11:37,100 --> 00:11:40,150
não é tudo o que precisamos fazer, precisamos

136
00:11:40,250 --> 00:11:43,750
alterar também o valor total, porque isso, é claro, muda.

137
00:11:43,940 --> 00:11:52,420
Portanto, quando adicionamos um item pela primeira vez, o valor total deve ser basicamente nosso valor total antigo, portanto, indique o valor

138
00:11:52,430 --> 00:11:57,530
total mais o preço do produto e será o mesmo se adicionarmos um

139
00:11:57,530 --> 00:12:04,910
item a um carrinho existente ou quando ele já existir lá porque no final, nosso total sempre é apenas o

140
00:12:04,910 --> 00:12:10,130
total antigo mais o preço, porque sempre adicionamos um item desse produto; é assim

141
00:12:10,130 --> 00:12:12,190
que esse aplicativo funciona.

142
00:12:12,200 --> 00:12:14,480
Portanto, nossa declaração de atualização aqui

143
00:12:14,480 --> 00:12:18,920
é quase a mesma, a única coisa que difere é aqui como criamos esse item

144
00:12:18,920 --> 00:12:24,110
do carrinho, portanto, é claro, também podemos reutilizar esse código, movê-lo para fora do bloco if else e

145
00:12:24,110 --> 00:12:27,590
em vez de ter duas constantes diferentes aqui , podemos criar

146
00:12:30,670 --> 00:12:33,150
uma variável antes de inserir a instrução if,

147
00:12:33,190 --> 00:12:36,990
atualizada ou talvez um novo item do carrinho, que poderia ser um nome,

148
00:12:37,090 --> 00:12:44,590
porque não sabemos o que será antecipadamente e, então, aqui na ramificação if aqui, atualizamos ou novo item de carrinho para esse item de carrinho

149
00:12:44,590 --> 00:12:49,900
atualizado, aqui, por outro lado, o definimos para este novo item de carrinho e aqui, sempre usamos o

150
00:12:49,930 --> 00:12:54,270
item de carrinho atualizado ou novo e, com isso, temos reutilização de código aqui e

151
00:12:54,400 --> 00:13:00,610
não repetir a nós mesmos, o que é sempre bom. Uma outra observação: copiar o estado aqui, é claro,

152
00:13:00,610 --> 00:13:04,420
é sempre redundante, porque você sempre define os itens e o valor total.

153
00:13:04,420 --> 00:13:09,520
Portanto, se você sempre tem apenas esses dois campos aqui e sempre altera os dois, não

154
00:13:09,520 --> 00:13:15,940
precisa copiar o estado existente; se você introduzir outro pedaço de dados na sua fatia de estado aqui, que não

155
00:13:15,940 --> 00:13:20,680
muda aqui no entanto, você precisa copiar seu estado antigo para não perder esses dados

156
00:13:20,680 --> 00:13:21,150
adicionais.

157
00:13:21,190 --> 00:13:26,470
Portanto, aqui deixarei essa funcionalidade de cópia, mesmo que não seja tecnicamente necessária aqui,

158
00:13:26,470 --> 00:13:30,750
mas se alguma vez mudarmos nosso estado onde foram salvos, não

159
00:13:31,030 --> 00:13:34,310
esquecemos de copiá-la e, portanto, perdemos dados.

160
00:13:34,330 --> 00:13:36,190
Bem, houve muito trabalho; com

161
00:13:36,190 --> 00:13:38,300
isso, podemos começar a despachar essa ação

162
00:13:38,320 --> 00:13:42,130
e, é claro, quero despachá-la da visão geral do produto e dos

163
00:13:42,190 --> 00:13:45,650
detalhes do produto, porque nas duas telas adicionei botões ao carrinho.

164
00:13:45,710 --> 00:13:50,890
Então, vamos começar na tela de visão geral dos produtos. Para despachar as

165
00:13:50,890 --> 00:13:52,380
ações do Redux,

166
00:13:52,600 --> 00:14:00,880
precisamos incluir o gancho de despacho de uso aqui. Com isso, podemos simplesmente acessar esta função de despacho chamando o uso

167
00:14:00,880 --> 00:14:08,410
de despacho como este e agora, quando clicamos em adicionar para carrinho lá em baixo, podemos despachar nossa ação

168
00:14:08,410 --> 00:14:13,330
aqui e, é claro, a propósito, em vez de usar funções inline

169
00:14:13,480 --> 00:14:15,930
aqui, você pode ter funções armazenadas

170
00:14:16,090 --> 00:14:24,700
em constantes separadas dentro de seu componente funcional aqui. Como alternativa, vou me ater a funções inline para agora e importarei todas

171
00:14:24,790 --> 00:14:32,080
as minhas ações aqui como ações do carrinho da pasta store e ali, a pasta actions, o arquivo cart.

172
00:14:32,080 --> 00:14:37,060
Agora, esta é uma sintaxe de importação que mescla todas as exportações do arquivo

173
00:14:37,060 --> 00:14:40,020
em um único objeto; temos apenas uma exportação aqui;

174
00:14:40,030 --> 00:14:42,610
portanto, você também pode direcionar essa

175
00:14:42,610 --> 00:14:46,630
exportação específica; posteriormente, teremos várias exportações e, portanto, utilizarei essa abordagem.

176
00:14:46,630 --> 00:14:49,750
Então aqui despachamos a ação do carrinho.

177
00:14:49,930 --> 00:14:55,400
adicione ao carrinho e esta é uma função que precisamos executar, essa é a nossa função criadora

178
00:14:55,400 --> 00:14:57,050
de ação e isso como

179
00:14:57,430 --> 00:15:05,270
argumento leva o nosso produto. Portanto, no final, precisamos passar o itemData. item que é apenas o nosso produto aqui na tela de detalhes

180
00:15:05,270 --> 00:15:06,330
do produto.

181
00:15:06,410 --> 00:15:12,850
Portanto, fazemos exatamente a mesma coisa, importamos use dispatch do React Redux; portanto, aqui podemos obter acesso

182
00:15:12,890 --> 00:15:17,560
à função de despacho chamando use dispatch e, em seguida, para

183
00:15:18,050 --> 00:15:23,990
esse botão aqui na função inline ou em uma função nomeada separada, se você gosta

184
00:15:24,440 --> 00:15:26,330
disso , você pode

185
00:15:26,360 --> 00:15:31,490
chamar despacho, agora precisamos importar nossas ações e usarei a mesma sintaxe de

186
00:15:31,490 --> 00:15:42,190
antes, onde importo tudo como ações do carrinho da pasta da loja, pasta de ações, arquivo do carrinho e agora ações do carrinho, chamada add to carrinho

187
00:15:42,190 --> 00:15:48,630
aqui e encaminhar o produto selecionado, que é o nosso produto, queremos adicionar ao carrinho aqui.

188
00:15:48,820 --> 00:15:54,190
Esperamos que isso despache ações de forma que o item seja adicionado ao carrinho, mas é claro que

189
00:15:54,190 --> 00:15:56,040
agora não podemos confirmar isso.

190
00:15:56,110 --> 00:16:04,390
Bem, na verdade nós podemos. Você pode ativar o depurador do React Native e eu não

191
00:16:04,990 --> 00:16:12,010
o usei antes, mas lá dentro, agora você pode pressionar o comando ou o controle t para abrir uma nova

192
00:16:15,030 --> 00:16:15,660
guia,

193
00:16:19,500 --> 00:16:20,520
confirmar a importação

194
00:16:23,560 --> 00:16:30,790
aqui e, em seguida, acessar os aplicativos e abrir o menu de depuração no iOS com o comando D, no

195
00:16:35,000 --> 00:16:43,990
Android com controle ou comando M e clique em depurar Javascript remoto. Agora, o meu foi aberto na porta 19003, então eu abri o depurador

196
00:16:43,990 --> 00:16:45,290
React Native na

197
00:16:45,300 --> 00:16:52,120
porta errada, selecione-me novamente, pressione o comando T ou controle T no depurador e escolha 19003, use qualquer porta

198
00:16:52,120 --> 00:17:00,460
aberta para você no Chrome, clique em confirmar e agora isso se conecta ao seu aplicativo React em execução aqui no depurador, feche o

199
00:17:01,210 --> 00:17:05,550
depurador do Chrome e recarregue o aplicativo. Agora, ele deve se conectar

200
00:17:05,590 --> 00:17:09,630
aqui e agora não apenas você pode inspecionar o aplicativo aqui,

201
00:17:09,640 --> 00:17:11,310
como expliquei anteriormente, não,

202
00:17:11,410 --> 00:17:11,940
você

203
00:17:11,980 --> 00:17:17,950
também pode dê uma olhada na parte lá em cima e esse é o seu depurador Redux,

204
00:17:17,950 --> 00:17:22,200
aí você pode ver o que o Redux está fazendo por você.

205
00:17:22,280 --> 00:17:28,620
A única coisa que você precisa fazer para fazê-lo funcionar é instalar um novo

206
00:17:28,660 --> 00:17:34,160
pacote com o npm install --save dev, porque é uma dependência de

207
00:17:34,160 --> 00:17:40,520
desenvolvimento que precisamos apenas durante o desenvolvimento e, instale a extensão Redux dev tools,

208
00:17:40,650 --> 00:17:44,870
acesse seu aplicativo . arquivo js depois

209
00:17:47,350 --> 00:17:50,010
e importe a partir desta

210
00:17:50,010 --> 00:17:56,280
extensão de ferramentas de desenvolvimento Redux. Você pode importar o compor com as ferramentas de desenvolvimento a partir

211
00:17:56,300 --> 00:18:00,050
daí e essa é uma função que você passa para criar a loja como um segundo

212
00:18:00,090 --> 00:18:03,260
argumento, você pode simplesmente executá-lo assim. A propósito, esse é o

213
00:18:03,260 --> 00:18:04,530
código, a importação

214
00:18:04,560 --> 00:18:10,020
e o uso que você deve remover antes de implantar o aplicativo, porque isso é apenas algo que deve

215
00:18:10,020 --> 00:18:14,160
estar em execução durante o desenvolvimento, não no aplicativo de produção, é necessário removê-lo

216
00:18:14,160 --> 00:18:20,580
antes de implantar o aplicativo mas durante o desenvolvimento, tudo bem. E com isso adicionado, se você agora salvar isso,

217
00:18:20,580 --> 00:18:26,940
verá que aqui neste Redux Inspector, você vê uma ação init sendo despachada, você nunca viu isso antes.

218
00:18:26,940 --> 00:18:30,560
Essa é uma ação que é despachada automaticamente quando o aplicativo é iniciado.

219
00:18:30,570 --> 00:18:35,670
Se agora eu clicar no carrinho aqui, você também verá a ação adicionar ao carrinho

220
00:18:35,670 --> 00:18:41,990
e agora aqui, poderá ver detalhes sobre essa ação, como os dados que foram anexados a ela e sobre

221
00:18:41,990 --> 00:18:48,120
o seu estado aqui e ali, por exemplo, é o estado do meu produto e onde está o

222
00:18:48,590 --> 00:18:50,380
estado do meu carrinho?

223
00:18:50,670 --> 00:18:54,840
Bem, é claro que falta, porque enquanto temos o redutor na ação configurada, no aplicativo. arquivo js, em redutores

224
00:18:54,840 --> 00:18:58,660
combinados, não estamos incluindo o estado do carrinho.

225
00:18:58,740 --> 00:19:07,110
Então, vamos importar o redutor do carrinho de. / StoreReducers / cart e agora com isso importado, podemos adicioná-lo ao nosso

226
00:19:07,440 --> 00:19:13,890
objeto de redutores combinados e, agora, adicionamos uma fatia do carrinho, por exemplo, aponte para o redutor do carrinho e,

227
00:19:13,890 --> 00:19:20,560
portanto, agora isso é incluído na nossa loja Redux. Com isso, se você agora esperar que isso seja recarregado

228
00:19:20,560 --> 00:19:25,830
e clicar no carrinho novamente, agora nesta ação adicionar ao carrinho, no estado, verá que agora

229
00:19:25,830 --> 00:19:30,960
há uma fatia do carrinho e agora há um valor total, você vê que há um

230
00:19:30,990 --> 00:19:35,700
item com a chave P1, que é o nosso produto com uma quantidade de

231
00:19:35,710 --> 00:19:43,900
1, esse preço, a soma disso e se agora clicar no carrinho pela segunda vez aqui, há outra ação despachada e se tivermos uma olhe

232
00:19:43,900 --> 00:19:48,790
o estado após esta ação, vemos agora, resfrie apenas um item, mas agora com a

233
00:19:48,790 --> 00:19:52,620
quantidade dois, o preço do produto por item é este, mas a

234
00:19:52,630 --> 00:19:54,030
soma é essa.

235
00:19:54,190 --> 00:19:55,120
Esta é

236
00:19:55,120 --> 00:19:57,760
a camisa, se agora eu também despachar o tapete

237
00:19:57,760 --> 00:20:02,590
azul, temos que adicionar ao carrinho mais uma vez e lá no estado, agora vemos

238
00:20:02,590 --> 00:20:04,190
de fato dois itens, P1

239
00:20:04,270 --> 00:20:09,930
e P2, P1 permanece inalterado, mas P2 foi adicionado agora e o valor total também parece bom para mim.

240
00:20:09,940 --> 00:20:16,150
Portanto, isso parece funcionar e é assim que você pode olhar para o seu estado Redux enquanto o aplicativo está sendo executado

241
00:20:16,240 --> 00:20:17,140
sem exibi-lo aqui.

242
00:20:17,140 --> 00:20:21,610
Agora, é claro, também queremos exibi-lo visualmente, mas esta é uma boa maneira de analisar

243
00:20:21,610 --> 00:20:25,120
seu estado nos bastidores com a ajuda do depurador React Native.

244
00:20:25,120 --> 00:20:30,010
Agora vamos fechá-lo aqui, porque diminui um pouco o aplicativo e, portanto, aqui

245
00:20:30,010 --> 00:20:35,230
no menu de depuração, também pararei minha depuração remota e fecharei o inspetor aqui.

246
00:20:35,260 --> 00:20:40,660
Também de volta no aplicativo. js, vou me livrar da coisa de compor com

247
00:20:40,660 --> 00:20:42,000
ferramentas de desenvolvimento aqui,

248
00:20:42,070 --> 00:20:47,020
para não esquecê-lo mais tarde, mas você sempre pode adicioná-lo aqui ou deixá-lo aqui enquanto estiver desenvolvendo, para

249
00:20:47,020 --> 00:20:48,380
que possa ver sua loja.

250
00:20:48,460 --> 00:20:51,010
O principal argumento para nós aqui é que

251
00:20:51,010 --> 00:20:57,280
isso parece funcionar e, com isso, é claro que agora podemos trabalhar adicionando um botão de ação aqui ao cabeçalho e garantir

252
00:20:57,280 --> 00:21:03,430
que possamos ir para a página do carrinho a partir dele ou com a ajuda desse botão de ação para que,

253
00:21:03,430 --> 00:21:06,220
na página do carrinho, possamos exibir as informações do carrinho.