1
00:00:02,270 --> 00:00:07,520
Portanto, armazenar é ótimo, buscar também seria bom e, no final, quero ter certeza de que, por

2
00:00:07,520 --> 00:00:10,510
exemplo, quando visitarmos a tela de visão geral de

3
00:00:10,580 --> 00:00:15,200
produtos, simplesmente chegaremos ao servidor e obteremos todos os produtos a partir daí, para que

4
00:00:15,290 --> 00:00:16,510
nessa tela ,

5
00:00:16,550 --> 00:00:19,390
sempre que o visitamos, carregamos os produtos mais recentes.

6
00:00:19,400 --> 00:00:22,500
Agora, para isso, precisamos enviar uma solicitação HTTP a partir

7
00:00:22,520 --> 00:00:28,250
daí e, no final, o que eu quero fazer é enviar uma nova ação Redux que chegue ao servidor,

8
00:00:28,250 --> 00:00:35,590
obtenha meus produtos de lá e defina os produtos na minha loja. Então, eu preciso de uma ação totalmente

9
00:00:35,620 --> 00:00:43,060
nova aqui, definir produtos, o que antes não era necessário, porque trabalhamos apenas com produtos fictícios, mas

10
00:00:43,060 --> 00:00:50,660
agora não é mais o caso, então os produtos definidos devem ser despachados agora e precisarei de

11
00:00:50,660 --> 00:00:58,110
um novo criador de ação que nomeei buscar produtos. Por isso, não tenho identificador, porque nunca enviarei isso como uma ação

12
00:00:58,110 --> 00:01:01,310
que deve alcançar o redutor. Em vez disso, esse

13
00:01:01,310 --> 00:01:06,110
será apenas o meu criador de ações com o código assíncrono com a solicitação HTTP.

14
00:01:06,110 --> 00:01:12,950
Ele não precisará de argumentos, mas, graças ao Redux Thunk, ele retorna uma função que obtém essa função de despacho como argumento

15
00:01:13,070 --> 00:01:16,470
e, no final, eu quero despachar um objeto de ação

16
00:01:16,490 --> 00:01:23,460
em que o tipo é definido como produtos e para onde desejo encaminhar meus argumentos. produtos, mas é claro que isso não deve

17
00:01:23,480 --> 00:01:30,490
ser uma matriz vazia, mas os produtos que recebo da minha API. Portanto, podemos copiar esse código aqui, incluindo

18
00:01:30,490 --> 00:01:38,610
a parte de envio assíncrono aqui, até onde obtemos os dados de resposta, copiar isso de criar produto

19
00:01:38,610 --> 00:01:40,590
e substituir essa parte

20
00:01:40,590 --> 00:01:47,810
aqui por ele e agora o que fazemos é enviamos uma solicitação para o mesmo URL

21
00:01:47,970 --> 00:01:52,530
de antes, o que faz sentido, porque é onde os

22
00:01:52,530 --> 00:01:54,380
produtos são armazenados.

23
00:01:54,390 --> 00:01:58,650
No entanto, agora eu quero definir uma solicitação get e esse é realmente o padrão

24
00:01:58,740 --> 00:02:04,380
quando usamos a busca, portanto, não precisamos definir isso. Para uma solicitação de obtenção, você também não precisa definir

25
00:02:04,380 --> 00:02:04,860
nenhum

26
00:02:04,890 --> 00:02:09,150
cabeçalho e não pode definir um corpo; portanto, aqui, podemos nos livrar completamente desse segundo argumento

27
00:02:09,150 --> 00:02:12,020
na busca, apenas enviamos uma solicitação de busca como esta.

28
00:02:12,210 --> 00:02:18,000
Agora, a resposta recuperará nossos dados, mas agora há uma característica importante sobre o formato

29
00:02:18,000 --> 00:02:21,880
desses dados e é melhor que simplesmente o vejamos.

30
00:02:21,900 --> 00:02:28,470
Então, deixe-me console registrar os dados da resposta aqui e comentar isso por enquanto ou podemos deixá-lo lá, não faz mal,

31
00:02:28,470 --> 00:02:29,680
não faz nada

32
00:02:29,700 --> 00:02:32,050
útil, não estamos lidando com isso no redutor

33
00:02:32,100 --> 00:02:37,200
ainda, mas vamos registrar isso e agora vamos para a tela de visão geral de produtos

34
00:02:37,200 --> 00:02:44,230
e certifique-se de que enviamos essa ação de busca de produtos. Agora, felizmente, já tenho acesso à função

35
00:02:44,230 --> 00:02:48,670
de despacho do Redux na visão geral dos produtos, então

36
00:02:48,850 --> 00:02:55,210
agora só preciso adicionar o efeito use para poder dispará-lo sempre que esse componente carregar.

37
00:02:55,210 --> 00:03:04,760
Então, aqui, eu posso adicionar efeito de uso e, na minha função, aqui, eu posso chamar despacho e agora estender a

38
00:03:04,790 --> 00:03:08,510
mão para minhas ações de produtos que, portanto,

39
00:03:08,510 --> 00:03:22,210
preciso importar como ações de produtos de ações de loja, como este, que devem ser ações e agora usar as ações de produtos aqui para acionar minha ação de busca

40
00:03:22,250 --> 00:03:29,240
de produtos que, no final, fará essa solicitação HTTP e esse efeito deve ser executado

41
00:03:29,240 --> 00:03:36,260
sempre que meu componente for carregado. Então, eu posso adicionar uma matriz vazia e, na verdade, adicionar minha

42
00:03:36,260 --> 00:03:38,300
única dependência que tenho que é

43
00:03:38,310 --> 00:03:44,070
despachada, aqui é a única dependência que definimos dentro do nosso componente, para que isso nunca seja executado novamente.

44
00:03:44,150 --> 00:03:48,350
O único momento em que ele será executado é quando esse componente for carregado e é exatamente

45
00:03:48,410 --> 00:03:49,830
o que deve ser o

46
00:03:49,850 --> 00:03:52,950
caso, sempre que eu visitar a tela, desejo disparar esse efeito aqui.

47
00:03:53,270 --> 00:03:57,410
Então, se eu agora salvar isso, vamos salvar isso e agora, à medida que

48
00:03:57,440 --> 00:04:03,780
isso for carregado, veja aqui no log, foi o que aconteceu aqui no Android e no iOS, e é por isso

49
00:04:03,790 --> 00:04:05,520
que vejo isso duas vezes.

50
00:04:05,560 --> 00:04:07,460
Foi isso que voltei no

51
00:04:07,510 --> 00:04:09,900
final, esse objeto foi retornado pelo Firebase.

52
00:04:09,910 --> 00:04:15,970
É um objeto com todos os meus produtos e só tenho um, e é por isso que só vejo um aqui e

53
00:04:15,970 --> 00:04:18,190
cada objeto corresponde ao seu ID exclusivo, mas isso

54
00:04:18,700 --> 00:04:19,510
é importante.

55
00:04:19,510 --> 00:04:25,210
Não voltamos ao array, retornamos um objeto com IDs únicos como chaves e os valores para

56
00:04:25,210 --> 00:04:30,760
essas chaves são meus dados de objeto e precisamos apenas saber isso para manipulá-lo corretamente.

57
00:04:30,760 --> 00:04:32,050
Então, de volta à

58
00:04:32,050 --> 00:04:34,200
nossa ação, é assim que os dados de

59
00:04:34,270 --> 00:04:38,790
resposta se parecem, é claro que no meu aplicativo eu trabalho com uma matriz, então preciso transformar isso.

60
00:04:38,950 --> 00:04:43,980
Portanto, meus produtos carregados ou como você quiser chamar isso aqui devem ser

61
00:04:44,200 --> 00:04:49,580
uma matriz vazia e agora podemos percorrer esse objeto para mapear os dados

62
00:04:49,610 --> 00:04:54,570
do objeto, os produtos do objeto para os produtos da matriz.

63
00:04:54,570 --> 00:05:00,490
É relativamente simples de fazer, podemos adicionar um loop for / in aqui com nossa chave, onde

64
00:05:00,490 --> 00:05:09,190
analisamos todos os dados de resposta que buscamos aqui no final e, em seguida, adiciono cada produto aos meus produtos carregados com push, para que

65
00:05:09,250 --> 00:05:13,240
isso A matriz cresce com o tempo e o que eu

66
00:05:13,240 --> 00:05:19,420
adiciono aqui no final é apenas um produto novo, usando o modelo de produto que você precisa importar,

67
00:05:19,420 --> 00:05:20,250
portanto,

68
00:05:20,260 --> 00:05:25,610
verifique se você tem essa importação aqui apontando para a pasta de modelos e para

69
00:05:26,860 --> 00:05:28,660
o arquivo do produto. crie

70
00:05:29,690 --> 00:05:36,910
um novo produto aqui onde meu ID é essa chave, porque é esse ID exclusivo que temos nesse objeto para o

71
00:05:36,910 --> 00:05:43,820
qual estamos fazendo loop, então aquela coisa de usuário, que ainda é U1, dados fictícios porque não temos dados de

72
00:05:43,820 --> 00:05:51,260
usuário envolvidos aqui e depois temos que olhar para o objeto que retornamos do Firebase para obter o título e assim

73
00:05:51,260 --> 00:05:52,180
por diante.

74
00:05:52,220 --> 00:05:58,720
Portanto, aqui, nosso título para este novo produto que estamos criando é simplesmente resData para a chave fornecida. título e o mesmo, é claro,

75
00:05:58,760 --> 00:06:00,380
aqui para

76
00:06:00,380 --> 00:06:05,920
o imageUrl, então. imagem URL. Para a

77
00:06:09,440 --> 00:06:19,610
descrição e, claro, também para o preço, assim. Portanto, isso adiciona tudo aos produtos carregados e agora os produtos carregados

78
00:06:19,610 --> 00:06:25,570
serão uma matriz preenchida que eu posso adicionar aqui à ação despachada, à ação

79
00:06:25,580 --> 00:06:27,070
de produtos definidos.

80
00:06:27,230 --> 00:06:32,530
Portanto, a única coisa que falta é que agora vamos para o redutor e lá podemos lidar com produtos definidos, talvez aqui como

81
00:06:32,690 --> 00:06:38,080
o primeiro caso, mas é claro que a posição não importa. Adicione produtos definidos aqui e, para

82
00:06:38,080 --> 00:06:43,660
isso, verifique se você está importando-o do seu arquivo de ações e depois lá, é

83
00:06:43,670 --> 00:06:49,230
algo muito trivial que estamos prestes a fazer. No final, só preciso retornar um

84
00:06:49,230 --> 00:06:59,090
novo estado em que os produtos disponíveis sejam iguais à ação. produtos, para os produtos que derivamos aqui no meu criador de

85
00:06:59,330 --> 00:07:05,810
ações que adiciono à minha ação despachada. E para o produto do

86
00:07:06,280 --> 00:07:14,210
usuário, é bem parecido, aí está a ação. produtos, filtrados apenas para todos os produtos que possuem meu ID de usuário, assim

87
00:07:15,450 --> 00:07:20,370
e no momento devido ao meu código fictício aqui onde codifico meu código de usuário, isso obviamente significa

88
00:07:20,490 --> 00:07:23,670
que todos os produtos carregados são tratados como meus produtos.

89
00:07:23,670 --> 00:07:29,790
Isso é algo que mudaremos depois que adicionarmos autenticação. Então, com isso, agora, se isso for

90
00:07:30,080 --> 00:07:35,120
recarregado, você verá que começamos com os dados fictícios, mas isso é

91
00:07:35,420 --> 00:07:39,830
imediatamente substituído pelos dados carregados. Portanto, o carregamento de dados funciona

92
00:07:39,830 --> 00:07:44,370
bem, podemos trabalhar com isso da mesma maneira que podemos com nossos próprios dados aqui.

93
00:07:44,390 --> 00:07:49,340
É claro que não estamos armazenando pedidos no servidor e nada disso, mas somos capazes de carregar

94
00:07:49,340 --> 00:07:51,410
nossos dados que armazenamos anteriormente no servidor.