1
00:00:02,060 --> 00:00:07,190
Portanto, no criador de ação de criação de produto, que atualmente é uma função que apenas retorna

2
00:00:07,550 --> 00:00:12,560
uma ação, agora podemos ajustar isso um pouco. Em vez de retornar uma ação, agora podemos

3
00:00:12,560 --> 00:00:13,050
retornar

4
00:00:13,070 --> 00:00:18,890
outra função lá, graças ao Redux Thunk, graças a este pacote, podemos fazer isso agora e esta será uma

5
00:00:18,890 --> 00:00:29,650
função que recebe a função de despacho como argumento e, por sua vez, precisa despachar um açao. Então, aqui, nesta função de retorno, agora eu simplesmente

6
00:00:29,650 --> 00:00:31,100
não

7
00:00:31,180 --> 00:00:36,310
preciso retornar isso, mas despachar esta ação, essa

8
00:00:36,310 --> 00:00:42,090
é a diferença importante e estou perdendo uma chave aqui.

9
00:00:42,130 --> 00:00:43,110
Então o que aconteceu?

10
00:00:43,360 --> 00:00:50,230
Altero create product para ser uma função que ainda podemos despachar de dentro de nossos componentes, mas que agora

11
00:00:50,740 --> 00:00:53,500
ainda pode funcionar como antes, portanto, não

12
00:00:53,530 --> 00:00:58,870
precisamos alterar todos esses criadores de ação, para que você possa seguir a sintaxe antiga,

13
00:00:58,870 --> 00:01:03,770
mas agora graças ao Redux Thunk, uma sintaxe alternativa, por assim dizer, também

14
00:01:03,970 --> 00:01:10,180
é suportada onde esta função criadora de ação não retorna imediatamente um objeto de ação, mas sim,

15
00:01:10,180 --> 00:01:15,970
onde retorna uma função e, se o fizer, o Redux Thunk intervém e garante que tudo

16
00:01:16,510 --> 00:01:22,180
ainda funciona e se ele retornar uma função, essa é uma função que deve receber um

17
00:01:22,390 --> 00:01:28,390
argumento, a função de despacho que será passada automaticamente pelo Redux Thunk; portanto, o Redux Thunk no

18
00:01:28,390 --> 00:01:28,900
final

19
00:01:29,620 --> 00:01:35,560
chamará essa função para você e, portanto, você poderá então despache uma nova ação e aqui, despache

20
00:01:35,560 --> 00:01:39,680
o objeto de ação real que anteriormente queríamos despachar, mas antes

21
00:01:39,850 --> 00:01:47,170
de fazer isso, agora você pode executar qualquer código assíncrono que desejar e que será permitido e não quebrará seu Redux

22
00:01:47,200 --> 00:01:52,240
fluir porque o Redux Thunk cuidará disso e você pode aprender mais sobre isso

23
00:01:52,240 --> 00:01:56,020
no meu curso React, por exemplo, ou é claro na

24
00:01:56,110 --> 00:02:00,340
documentação oficial do Redux Thunk, também nos documentos oficiais do Redux.

25
00:02:00,350 --> 00:02:05,900
Portanto, agora aqui podemos enviar uma solicitação HTTP e, no React Native, podemos usar a API de

26
00:02:05,900 --> 00:02:08,120
busca incorporada e a busca aqui

27
00:02:08,120 --> 00:02:12,590
funciona basicamente como a API de busca no navegador onde isso também está disponível.

28
00:02:12,590 --> 00:02:17,210
É preciso um URL para o qual você deseja enviar a solicitação e esse é o URL que

29
00:02:17,210 --> 00:02:21,180
chegamos aqui, então eu apenas copio esse URL do Firebase e o insiro aqui.

30
00:02:21,380 --> 00:02:24,440
Agora, a busca parece sempre buscar dados; portanto,

31
00:02:24,440 --> 00:02:30,440
se eles obtiverem dados, mas na verdade o nome é um pouco confuso aqui, não é apenas usado para

32
00:02:30,440 --> 00:02:33,950
obter dados, você também pode usá-lo para enviar uma solicitação de

33
00:02:34,040 --> 00:02:40,640
postagem ou de entrada, portanto, qualquer tipo de solicitação HTTP. Agora também não enviamos apenas uma solicitação para esse URL, mas

34
00:02:40,640 --> 00:02:47,930
agora, como eu disse, o Firebase converte suas solicitações em um tipo de consulta e estrutura de banco de dados, para que você

35
00:02:47,930 --> 00:02:50,990
possa adicionar qualquer nó que desejar aqui, qualquer segmento

36
00:02:50,990 --> 00:02:57,230
que desejar, como por exemplo, produtos e Firebase meio que criam uma pasta aqui no banco de dados e armazenam

37
00:02:57,230 --> 00:02:58,410
seus dados lá.

38
00:02:58,700 --> 00:03:03,800
Importante e isso é apenas uma coisa específica do Firebase, você precisa adicionar. json aqui.

39
00:03:03,830 --> 00:03:11,140
Portanto, isso não é necessário por causa do React Native ou por Javascript ou por solicitação HTTP, isso é apenas

40
00:03:11,140 --> 00:03:15,690
uma coisa específica do Firebase. Por padrão, isso enviaria uma solicitação de

41
00:03:15,700 --> 00:03:21,280
obtenção, mas para armazenar dados, o Firebase deseja uma solicitação de postagem e, para enviá-la, precisamos passar um segundo

42
00:03:21,280 --> 00:03:27,610
argumento para buscar o que deve ser um objeto Javascript. Nesse segundo argumento, você

43
00:03:27,610 --> 00:03:34,480
pode configurar a chave do método e descrever o

44
00:03:34,480 --> 00:03:42,070
método HTTP dessa solicitação, que pode ser obtido, colocado, etc. será

45
00:03:42,070 --> 00:03:44,130
criado lá.

46
00:03:44,140 --> 00:03:47,760
Agora você também pode configurar alguns cabeçalhos lá e precisamos definir um

47
00:03:47,920 --> 00:03:53,530
cabeçalho, precisamos adicionar o cabeçalho do tipo de conteúdo e você simplesmente adiciona cabeçalhos como um objeto e, em

48
00:03:53,530 --> 00:03:58,950
seguida, possui pares de valores-chave com seus identificadores de cabeçalho como chaves e os valores como valores e aqui

49
00:03:59,200 --> 00:04:04,290
o valor é application / json para informar ao Firebase que estamos prestes a enviar alguns dados

50
00:04:04,360 --> 00:04:06,530
JSON e, em seguida, precisamos fazer isso.

51
00:04:06,580 --> 00:04:11,680
Precisamos adicionar um corpo com os dados que queremos anexar a essa solicitação e os dados devem estar

52
00:04:11,680 --> 00:04:12,730
no formato JSON.

53
00:04:12,730 --> 00:04:19,240
Felizmente, o React Native suporta o objeto JSON que o Javascript do navegador também

54
00:04:19,240 --> 00:04:26,440
suporta, e podemos chamar stringify para transformar uma matriz ou objeto Javascript no formato JSON; portanto,

55
00:04:26,440 --> 00:04:28,040
em uma string

56
00:04:28,040 --> 00:04:33,210
no final, desejo anexar meu produto. Então, no final, quero especificar um

57
00:04:33,210 --> 00:04:37,420
objeto aqui que contém meu título, minha descrição, minha imageUrl e

58
00:04:39,100 --> 00:04:42,100
meu preço, não o ID, porque na

59
00:04:42,100 --> 00:04:47,830
verdade o Firebase irá gerar um ID para nós aqui, o que é realmente conveniente.

60
00:04:49,070 --> 00:04:54,610
Agora isso enviará a solicitação, mas é claro que eu só quero criar o produto

61
00:04:54,820 --> 00:05:00,490
localmente se essa solicitação for bem-sucedida, porque na verdade eu também posso usar o ID

62
00:05:00,490 --> 00:05:08,410
criado automaticamente que o Firebase retornará para mim e buscar convenientemente uma promessa, que é esse objeto Javascript isso acabará resolvendo

63
00:05:08,410 --> 00:05:12,620
um valor no futuro ou gerará um erro no futuro.

64
00:05:12,940 --> 00:05:19,290
Portanto, para aguardar essa resposta, podemos adicioná-lo aqui após a busca. Portanto,

65
00:05:19,290 --> 00:05:26,170
nessa promessa, obteremos nossa resposta aqui para que possamos fazer qualquer coisa com a resposta.

66
00:05:26,190 --> 00:05:31,200
Você também pode ouvir os erros com o catch e isso é algo que você

67
00:05:31,200 --> 00:05:33,290
já deve saber, porque as

68
00:05:33,300 --> 00:05:39,900
promessas não são específicas do React Native, que é o Javascript baunilha e o React Native também suporta a sintaxe

69
00:05:39,900 --> 00:05:46,270
de espera assíncrona mais moderna, em vez disso, e catch. Para usar isso, você adiciona async aqui antes

70
00:05:46,290 --> 00:05:53,700
da sua função, essa palavra-chave assíncrona e agora pode aguardar sua resposta aqui e armazená-la em constante com esta sintaxe,

71
00:05:53,700 --> 00:05:55,400
com a palavra-chave wait.

72
00:05:55,410 --> 00:05:59,520
Agora, nos bastidores, isso transforma a sintaxe antiga com then; portanto,

73
00:05:59,580 --> 00:06:05,640
é como se você adicionasse aqui e usasse sua resposta em um retorno de chamada que chegou lá.

74
00:06:05,640 --> 00:06:09,480
Mas isso é um pouco mais fácil de ler, e é por isso que vou usar essa sintaxe

75
00:06:09,480 --> 00:06:17,160
assíncrona à espera, apenas esteja ciente do fato de que isso é como adicionar então, apenas mais legível. Quando você usa async aguardar a propósito, essa

76
00:06:17,160 --> 00:06:22,770
função aqui sempre retornará automaticamente uma promessa, portanto, toda essa função de criação

77
00:06:22,770 --> 00:06:23,780
de

78
00:06:23,820 --> 00:06:25,880
produto agora retorna uma promessa.

79
00:06:26,010 --> 00:06:27,330
Não fez isso

80
00:06:27,330 --> 00:06:28,300
antes, agora

81
00:06:28,350 --> 00:06:33,040
fará, veja aqui, agora retorna uma promessa. Portanto, essa é a nossa

82
00:06:34,280 --> 00:06:38,960
resposta. Agora, essa resposta pode ser descompactada para que os dados cheguem lá;

83
00:06:39,140 --> 00:06:45,430
portanto, os dados de resposta são feitos chamando resposta. json, esse é um método disponível no objeto

84
00:06:45,430 --> 00:06:50,730
de resposta que estamos recebendo. Isso novamente é uma tarefa assíncrona que

85
00:06:51,050 --> 00:06:56,910
precisamos aguardar e agora, no final, fornecerá os dados retornados pelo Firebase quando adicionamos um produto.

86
00:06:56,920 --> 00:07:03,620
Agora, por enquanto, podemos simplesmente registrar esses dados de resposta para ver o que há lá dentro e ainda

87
00:07:03,620 --> 00:07:09,320
despachar minha ação aqui, mas como esperamos aqui e, portanto, é como se estivesse em vários

88
00:07:09,320 --> 00:07:13,520
blocos, isso só será despachado quando essas operações forem realizadas. feito.

89
00:07:13,520 --> 00:07:19,190
Então, com isso, vamos salvar isso e adicionar um novo produto, indo para a seção

90
00:07:19,190 --> 00:07:21,580
de administração aqui e depois adicionarei

91
00:07:21,830 --> 00:07:24,820
uma camisa branca, escolhi um bom imageUrl para

92
00:07:24,820 --> 00:07:26,320
isso, aqui está.

93
00:07:26,320 --> 00:07:34,510
Digamos que custa 39. 99, esta é uma camisa branca que é bem estilosa.

94
00:07:34,510 --> 00:07:39,110
Se agora eu salvar isso, preciso carregar isso primeiro, agora isso é adicionado, aqui está e agora,

95
00:07:39,110 --> 00:07:40,130
se você der uma

96
00:07:40,130 --> 00:07:41,130
olhada no Firebase,

97
00:07:41,210 --> 00:07:46,310
também veremos que agora existe um nó de produtos. Lá, esse é um ID exclusivo e lá

98
00:07:46,310 --> 00:07:50,430
temos os dados que enviamos e, se você der uma olhada no seu

99
00:07:50,620 --> 00:07:53,440
console, verá que é isso que recuperamos, que são

100
00:07:53,440 --> 00:07:55,100
esses dados de resposta aqui.

101
00:07:55,120 --> 00:08:01,780
Isso contém uma chave de nome e, em seguida, também mantém esse ID que o Firebase gerou, isso significa que quando enviamos nossos dados

102
00:08:01,780 --> 00:08:08,670
aqui, podemos realmente adicionar uma chave de ID aqui e adicionar resData. name para acessar essa chave de nome

103
00:08:08,720 --> 00:08:14,800
na resposta retornada pelo Firebase para encaminhar o ID gerado no servidor para nosso

104
00:08:14,800 --> 00:08:21,330
redutor de produto criado no final ou para a lógica que é executada no redutor.

105
00:08:21,340 --> 00:08:28,960
Portanto, agora no redutor de produtos, na verdade, não podemos usar esse ID fictício aqui, mas

106
00:08:28,960 --> 00:08:36,530
esperar isso nos dados de nossos produtos. Agora, agora temos um campo de ID que é o ID gerado

107
00:08:36,530 --> 00:08:43,430
pelo servidor, mas continuarei com o ID do usuário fictício por enquanto, mas obteremos esse ID gerado pelo servidor aqui e aqui está,

108
00:08:43,430 --> 00:08:48,910
e, portanto, usamos isso em o frontend também, o que será importante para mais tarde, quando também excluirmos

109
00:08:48,920 --> 00:08:50,600
coisas e assim por diante.

110
00:08:50,630 --> 00:08:55,460
Portanto, isso adiciona um produto, mas é claro que, assim que recarregamos o aplicativo, ele desaparece porque, no aplicativo, ele

111
00:08:55,460 --> 00:08:56,810
era armazenado apenas na memória.

112
00:08:56,810 --> 00:09:01,190
Agora, também o armazenamos em um servidor, mas nunca o buscamos em um servidor,

113
00:09:01,220 --> 00:09:03,170
portanto, certifique-se de fazer isso também.