1
00:00:02,550 --> 00:00:04,670
Para garantir que eles carreguem, novamente

2
00:00:04,710 --> 00:00:10,260
precisamos voltar ao criador da ação e adicionar uma nova ação no criador da ação de pedidos, com licença.

3
00:00:11,590 --> 00:00:18,880
Um identificador necessário é definir pedidos, assim como tínhamos um para definir produtos para definir os pedidos carregados e, aqui,

4
00:00:18,880 --> 00:00:21,340
tenho meu criador de ação de

5
00:00:21,340 --> 00:00:28,120
pedidos de busca que não aceita argumentos, mas que retorna minha função de envio assíncrono aqui, graças a

6
00:00:28,140 --> 00:00:36,580
Redux Thunk e por fim, despacho ou envio uma nova ação em que o tipo é definido como pedidos e onde tenho meus

7
00:00:36,580 --> 00:00:41,250
pedidos carregados e, é claro, que não deve ser uma matriz vazia.

8
00:00:41,290 --> 00:00:47,050
Em vez disso, podemos emprestar a lógica do criador da ação dos produtos, de buscar produtos lá. Podemos pegar toda essa lógica,

9
00:00:47,110 --> 00:00:55,850
copiar tudo isso aqui e movê-la para o criador da ação de pedidos

10
00:00:55,850 --> 00:00:57,180
e

11
00:00:57,410 --> 00:01:04,000
executá-la antes de despacharmos aqui. Agora, é claro que precisamos ajustar isso, por exemplo, a solicitação precisa ser

12
00:01:04,190 --> 00:01:07,940
enviada para pedidos / U1 e novamente será substituída posteriormente por um valor dinâmico,

13
00:01:07,940 --> 00:01:13,880
pois agora é codificado para buscar os pedidos deste usuário. Deve ser uma solicitação de recebimento, eu quero verificar

14
00:01:13,880 --> 00:01:14,930
isso, tudo bem.

15
00:01:14,930 --> 00:01:16,250
Aqui obtive meus

16
00:01:16,250 --> 00:01:19,450
dados de resposta, agora recebi meus pedidos carregados, que

17
00:01:19,460 --> 00:01:21,550
parecem ser um nome mais

18
00:01:21,560 --> 00:01:27,170
apropriado, ainda percorro todos os dados que obtive e quero definir meus pedidos carregados, mas agora

19
00:01:27,230 --> 00:01:30,050
há uma diferença importante, Não crio aqui novos

20
00:01:30,050 --> 00:01:34,210
produtos que adiciono a pedidos carregados; em vez disso, é claro que

21
00:01:34,340 --> 00:01:37,680
preciso criar novos pedidos aqui e, para isso, é necessário

22
00:01:37,890 --> 00:01:43,510
importar o pedido do modelo de pedido. Agora também vejo que falta uma cinta

23
00:01:43,520 --> 00:01:48,990
encaracolada, agora antes de prosseguir com isso, preciso ter certeza de que também pego os

24
00:01:49,020 --> 00:01:57,550
erros que possa estar recebendo e lá quero lançar o erro, basicamente repita-o, certifique-se ele chega ao meu componente e eu preciso de

25
00:01:57,550 --> 00:01:59,220
mais uma chave

26
00:01:59,260 --> 00:02:04,530
de fechamento, mas agora, de volta à nossa lógica, aqui onde eu crio novos

27
00:02:07,350 --> 00:02:11,480
pedidos, aí o ID é a chave, assim como para os

28
00:02:11,490 --> 00:02:18,920
produtos, os itens podem ser encontrados nos meus dados de resposta, porque basicamente, volte aqui, para que os dados da

29
00:02:18,920 --> 00:02:24,420
resposta tenham uma chave de itens do cartão, por exemplo, que contém os itens do

30
00:02:24,420 --> 00:02:30,360
meu cartão que eu preciso. Então, dados de resposta para a chave fornecida e lá,. cardItems, é aí que

31
00:02:30,360 --> 00:02:38,200
encontro meus itens, porque é o que enviamos aqui no final para armazenar os itens do cartão, então

32
00:02:38,200 --> 00:02:42,610
meu pedido que eu criar aqui, obviamente, também precisa

33
00:02:42,640 --> 00:02:48,700
do valor total, recebo da chave resData e, se tivermos, uma olhada no Firebase,

34
00:02:48,700 --> 00:02:53,290
é esse campo de valor total aqui e a data.

35
00:02:53,330 --> 00:03:00,520
Bem, para isso, eu crio um novo objeto de data, mas eu o inicializo com a chave resData. encontro.

36
00:03:00,540 --> 00:03:05,760
Agora precisamos criar um novo objeto de dados porque a chave resData. date é exatamente essa string de data aqui e

37
00:03:05,850 --> 00:03:08,190
eu preciso de um objeto de data, não

38
00:03:08,190 --> 00:03:13,800
de uma string de data, portanto, envolvemos, essa string envolve a criação do objeto de data aqui e, portanto, obtemos

39
00:03:13,800 --> 00:03:14,220
um

40
00:03:14,250 --> 00:03:17,130
objeto de dados e é essa a ordem que adiciono aqui

41
00:03:17,130 --> 00:03:22,470
para pedidos carregados, fazemos isso para todos os pedidos que estamos buscando e, com isso, podemos despachar isso e

42
00:03:22,470 --> 00:03:24,950
agora precisamos lidar com isso no redutor de pedidos.

43
00:03:25,080 --> 00:03:32,230
Portanto, se eu lidar com pedidos definidos e, para isso, é claro que você precisará importar esse identificador de ação, a única coisa que preciso fazer é retornar um novo

44
00:03:32,290 --> 00:03:37,500
objeto de estado em que pedidos sejam iguais à ação. pedidos e é tudo o

45
00:03:37,570 --> 00:03:39,280
que precisamos fazer,

46
00:03:39,280 --> 00:03:40,640
muito simples.

47
00:03:40,720 --> 00:03:42,250
Agora, por que é tão simples assim?

48
00:03:42,280 --> 00:03:47,530
Porque no criador da ação, fazemos todo o trabalho. Lá, mapeamos nossos pedidos e, em seguida, aqui, eu

49
00:03:47,530 --> 00:03:50,290
apenas tenho a chave de pedidos em minha ação que

50
00:03:50,440 --> 00:03:53,740
contém todos os pedidos mapeados, então é exatamente isso que preciso armazenar aqui.

51
00:03:54,150 --> 00:04:03,570
Agora, a etapa restante é enviarmos os pedidos de busca aqui em nossa tela de pedidos. Então, vamos lá e vamos adicionar o efeito use novamente

52
00:04:03,840 --> 00:04:10,560
para fazer isso e para despachar, também precisamos importar despacho de uso do React

53
00:04:10,560 --> 00:04:14,470
Redux e, aqui, podemos obter acesso a essa

54
00:04:14,730 --> 00:04:20,050
função de despacho executando o uso de despacho e, em seguida,

55
00:04:20,250 --> 00:04:28,420
aqui em uso, adicionamos despacho como uma dependência porque, nesse efeito, funciona aqui, despacho e agora preciso de

56
00:04:28,420 --> 00:04:31,640
minhas ações de pedido, então deixe-me

57
00:04:31,660 --> 00:04:39,730
importar tudo como ações de pedidos da pasta da loja, da pasta de ações, do arquivo de

58
00:04:39,730 --> 00:04:50,840
pedidos e com o importado aqui , podemos dizer ações de pedidos. fetchOrders assim e então faremos a solicitação e, portanto, agora, se

59
00:04:51,110 --> 00:04:56,690
salvarmos isso e formos para a tela de pedidos, ele ficará vazio,

60
00:04:56,690 --> 00:05:05,790
mas muito rápido, e carregará todos os pedidos que armazenamos e esses são esses três ordens que tenho aqui

61
00:05:05,790 --> 00:05:14,260
e, é claro, podemos expandir isso como antes. Agora, um spinner de carregamento também seria bom e, é claro, você

62
00:05:14,260 --> 00:05:15,790
também pode pausar

63
00:05:15,790 --> 00:05:18,830
o vídeo aqui e tentar fazer isso sozinho.

64
00:05:18,830 --> 00:05:24,830
Eu farei isso rapidamente da mesma maneira que antes - importe o

65
00:05:24,900 --> 00:05:36,120
estado de uso do React, então aqui configure o estado isLoading e defina isLoading executando o estado de uso e definindo-o como false inicialmente

66
00:05:36,120 --> 00:05:42,540
e depois aqui no efeito, no final, eu quero para usar async aguardam.

67
00:05:42,550 --> 00:05:50,920
Agora eu disse que você não pode ou não deve adicionar assíncrono aqui, para que possamos usá-lo aqui simplesmente ou agrupá-lo em

68
00:05:50,920 --> 00:05:52,150
uma função auxiliar.

69
00:05:52,150 --> 00:06:01,320
Agora vou usar apenas a chamada then, então configurarei o isLoading como true aqui e, em seguida, adicionarei aqui e assim que isso for feito,

70
00:06:01,320 --> 00:06:05,880
sei que temos uma resposta, então aqui configurarei o isLoading como false.

71
00:06:05,880 --> 00:06:08,680
Agora, observe que não estou lidando com erros aqui; portanto, se

72
00:06:08,700 --> 00:06:11,050
isso falhar, não estamos lidando com isso, estaremos sempre

73
00:06:11,070 --> 00:06:13,530
no estado de carregamento; portanto, é claro que você

74
00:06:13,530 --> 00:06:18,200
pode considerar adicionar também o tratamento de erros. Eu simplesmente não o farei aqui porque

75
00:06:18,200 --> 00:06:21,570
mostrei como ele funciona, para não inchar muito este módulo, não

76
00:06:21,660 --> 00:06:23,360
o implementarei, mas posso, mas é

77
00:06:23,370 --> 00:06:28,710
claro que você pode lidar com erros aqui, se você quiser usar isso, então se aproxime aqui

78
00:06:28,710 --> 00:06:30,400
adicionando também catch, isso

79
00:06:30,420 --> 00:06:32,790
é algo que você pode absolutamente fazer aqui.

80
00:06:33,430 --> 00:06:35,340
No entanto,

81
00:06:35,350 --> 00:06:43,000
vou me concentrar na parte de carregamento. Agora que já tenho tudo isso configurado, podemos

82
00:06:43,000 --> 00:06:45,560
importar o indicador de atividade

83
00:06:45,570 --> 00:06:55,340
e o componente view e, para obter alguns estilos, também importar a API da folha de estilo do React Native e verificar se

84
00:06:55,370 --> 00:07:04,890
estamos no estado de carregamento. Nesse caso, eu deseja retornar meu indicador de atividade centralizada aqui com um tamanho grande e uma

85
00:07:04,920 --> 00:07:12,180
cor que devam ser as cores que você precisa importar, portanto, primárias, portanto, verifique se a importação

86
00:07:12,220 --> 00:07:23,620
de cores foi adicionada e, com isso, aqui adicionarei estilo igual para estilos. centralizado ou no entanto você deseja nomeá-lo e agora adicione esse objeto de

87
00:07:23,620 --> 00:07:32,190
estilos aqui com a ajuda da Folha de estilo. criar e centralizar devem ter

88
00:07:32,840 --> 00:07:44,750
a configuração do flex one, justificar o centro de conteúdo e alinhar o centro

89
00:07:44,750 --> 00:07:53,980
de itens, assim. Com isso, se salvarmos, daremos uma olhada nas ordens, veremos o botão giratório. Novamente, ele está carregando muito rápido, mas você

90
00:07:54,010 --> 00:07:59,890
pode vê-lo se olhar de perto. Aqui está o botão giratório por uma fração de segundo

91
00:07:59,980 --> 00:08:06,850
e, a partir de então, os pedidos são carregados. Portanto, agora está funcionando, armazenar e buscar pedidos

92
00:08:07,030 --> 00:08:13,770
também funciona e, com isso, implementamos solicitações HTTP e usamos um servidor para armazenar os dados neste aplicativo.