1
00:00:02,210 --> 00:00:08,690
O objetivo da tela de visão geral do produto é apresentar uma lista de todos os produtos que podemos solicitar

2
00:00:09,830 --> 00:00:13,250
e, portanto, aqui, é claro, teremos um componente React normal, portanto,

3
00:00:13,250 --> 00:00:15,490
precisamos importar o React do React.

4
00:00:15,620 --> 00:00:20,440
Também precisaremos importar um monte de coisas do React Native, com certeza,

5
00:00:20,450 --> 00:00:26,330
por exemplo, precisarei de uma lista simples aqui porque exibirei uma lista de produtos, não sabemos

6
00:00:26,330 --> 00:00:31,910
quanto tempo essa lista será, mas é potencialmente por muito tempo, queremos otimizá-lo para rolagem,

7
00:00:31,910 --> 00:00:33,440
e é isso

8
00:00:33,440 --> 00:00:39,050
que a lista simples faz fora da caixa e podemos importar mais componentes conforme necessário.

9
00:00:40,460 --> 00:00:42,020
Portanto, essas são as

10
00:00:42,020 --> 00:00:51,980
duas importações de base. Agora, com isso, criarei os componentes da tela de visão geral dos meus produtos aqui, simplesmente neste formulário de função, onde recebemos adereços e, em

11
00:00:52,070 --> 00:00:58,820
seguida, temos que retornar alguns jsx aqui no final e no final. Também exporte a tela de visão geral

12
00:00:58,820 --> 00:01:05,360
dos meus produtos aqui como o padrão deste arquivo. Agora, com isso, a questão, claro,

13
00:01:05,370 --> 00:01:11,830
é o que há lá? O que há dentro do nosso componente e lá dentro,

14
00:01:11,910 --> 00:01:14,660
é claro que quero renderizar minha lista

15
00:01:14,670 --> 00:01:17,610
fixa, quero renderizar minha lista plana de produtos.

16
00:01:17,610 --> 00:01:23,340
Agora, é claro, ainda não temos produtos, mas podemos adicionar alguns. Assim como antes, adicionarei uma pasta de modelos

17
00:01:23,340 --> 00:01:26,380
na qual posso definir a aparência de um produto.

18
00:01:26,400 --> 00:01:32,130
Isso não é obrigatório, mas pode ajudá-lo a organizar seus dados e garantir que você nunca trabalhe acidentalmente

19
00:01:32,130 --> 00:01:37,980
com diferentes tipos de produtos, nos quais você simplesmente esqueceu de adicionar uma determinada propriedade em um local

20
00:01:37,980 --> 00:01:39,120
do seu aplicativo.

21
00:01:39,180 --> 00:01:44,640
Então, portanto, aqui nos produtos. js na pasta models, criarei uma classe de

22
00:01:44,640 --> 00:01:51,030
produto que tem um construtor onde defino a aparência de um produto e quero que cada produto tenha um ID

23
00:01:51,030 --> 00:01:57,200
exclusivo; ele também deve ter um ID de proprietário, que é o ID de o usuário que o criou.

24
00:01:57,540 --> 00:01:59,550
Deve ter um título,

25
00:01:59,630 --> 00:02:04,320
deve ter um imageUrl, deve ter uma descrição e deve ter um preço,

26
00:02:04,320 --> 00:02:08,850
estas são as coisas que compõem um produto para mim nesta aplicação.

27
00:02:09,030 --> 00:02:13,890
Agora, é claro, quando recebemos todas essas coisas como argumentos no construtor, quero

28
00:02:13,890 --> 00:02:18,570
armazená-las nas propriedades deste objeto, que podemos criar com a ajuda desse

29
00:02:18,570 --> 00:02:21,960
construtor, portanto, faço essa tarefa que você

30
00:02:21,960 --> 00:02:27,570
também viu antes de guardar. todos os dados que recebemos nas propriedades do objeto criado.

31
00:02:27,570 --> 00:02:37,660
Então, aqui, armazenamos o título, o imageUrl, os IDs e, é claro, a descrição e o preço. Com isso configurado aqui, temos um plano para um produto e

32
00:02:37,660 --> 00:02:44,350
depois o usaremos no Redux e, no final, obteremos uma lista de produtos aqui

33
00:02:44,350 --> 00:02:52,280
na tela de visão geral de produtos. Agora, para chegar lá, precisamos acessar o Redux

34
00:02:52,280 --> 00:02:56,980
e, para que isso seja possível, precisamos configurar o Redux.

35
00:02:56,990 --> 00:03:03,080
Então, vamos para a pasta da loja agora e ali, quero ter uma subpasta de ações e

36
00:03:03,080 --> 00:03:07,820
uma subpasta redutores, neste aplicativo pela maneira como teremos redutores e ações

37
00:03:07,820 --> 00:03:10,640
diferentes, ao contrário do último módulo aqui.

38
00:03:10,760 --> 00:03:13,760
Então, por enquanto, começaremos com os produtos. js aqui na

39
00:03:13,830 --> 00:03:19,510
pasta reducers e também adicionarei um produto. arquivo js na pasta de ações.

40
00:03:19,550 --> 00:03:24,980
Novamente, se é confuso para você que temos o mesmo nome aqui em pastas diferentes, você sempre pode

41
00:03:24,980 --> 00:03:29,440
ver em qual arquivo estou aqui no topo aqui com esse recurso de navegação e,

42
00:03:29,660 --> 00:03:33,480
é claro, você também pode trabalhar com nomes diferentes no seu aplicativo

43
00:03:33,620 --> 00:03:39,380
se isso é confuso, acho que é bem claro, mas em qual arquivo estou trabalhando, é claramente selecionado aqui também.

44
00:03:39,380 --> 00:03:45,200
Então, vamos começar no redutor de produtos e aí eu quero definir meu estado inicial, porque

45
00:03:45,200 --> 00:03:49,600
esse tipo de definição de quantos segmentos de estado relacionados a produtos

46
00:03:49,880 --> 00:03:54,440
será exibido e, é claro, como sempre na programação há mais de

47
00:03:54,440 --> 00:04:02,890
uma abordagem possível, acho que faz sentido dizer que temos uma lista de produtos disponíveis, que é uma matriz e de produtos e

48
00:04:03,190 --> 00:04:06,070
produtos para usuários, esses são simplesmente os

49
00:04:06,070 --> 00:04:08,630
produtos que criamos, portanto, onde o

50
00:04:08,710 --> 00:04:14,800
ID do proprietário é o ID do usuário conectado no momento e para o Neste momento,

51
00:04:14,800 --> 00:04:19,450
não teremos o recurso de login, mas mais tarde será esse o

52
00:04:19,450 --> 00:04:26,380
caso. No momento, você configurará isso de maneira simples. O produto disponível deve ser todos os produtos ou talvez apenas os

53
00:04:26,380 --> 00:04:31,990
produtos que não criamos para que não possamos comprar nossos próprios produtos, embora, na realidade, na maioria das lojas, você também

54
00:04:31,990 --> 00:04:34,990
possa comprar o que vende, então acho que também podemos

55
00:04:34,990 --> 00:04:39,700
basta levar todos os produtos aqui, mas é algo que você também pode ajustar em seu aplicativo.

56
00:04:39,700 --> 00:04:47,920
Portanto, temos essas duas matrizes de produtos. Agora, no redutor aqui, que é uma função em que obtemos o estado que deve

57
00:04:47,920 --> 00:04:49,960
ser inicializado com o nosso estado inicial

58
00:04:49,960 --> 00:04:55,360
e deve levar isso como um valor padrão e onde obtemos uma ação, lá mais tarde manipularemos diferentes tipos de ação

59
00:04:55,360 --> 00:05:02,260
para que possamos por exemplo, adicione um novo produto e assim por diante. Por enquanto, sempre retornarei meu estado aqui e,

60
00:05:02,260 --> 00:05:04,380
portanto, sempre retornarei meu

61
00:05:04,450 --> 00:05:09,610
estado inicial, é claro, e isso nos permitirá explorar o Redux e,

62
00:05:09,610 --> 00:05:12,300
pelo menos, obter esse estado inicial.

63
00:05:12,340 --> 00:05:19,210
Agora, é claro, sem a possibilidade de adicionar novos produtos, nosso estado inicial não é tão útil, porque

64
00:05:19,210 --> 00:05:21,550
possui listas vazias de produtos aqui,

65
00:05:21,700 --> 00:05:23,480
então nada poderíamos renderizar.

66
00:05:23,740 --> 00:05:25,420
Assim como fiz antes,

67
00:05:25,480 --> 00:05:32,080
também adicionarei uma pasta de dados e configurarei aqui alguns dados fictícios que não usaremos em todo o módulo,

68
00:05:32,110 --> 00:05:37,150
mas que podemos usar por enquanto, para que tenhamos alguns produtos para começar com

69
00:05:37,150 --> 00:05:43,390
e para isso, você encontra anexados esses dados fictícios. arquivo js que você pode usar para substituir o seu ou onde você

70
00:05:43,390 --> 00:05:47,230
pode copiar o conteúdo para seus dados fictícios. O arquivo js e o

71
00:05:47,230 --> 00:05:50,620
que faço lá importam meu modelo de produto; portanto, é

72
00:05:50,620 --> 00:05:54,700
claro que você deve se certificar de que esse caminho esteja correto se

73
00:05:54,700 --> 00:06:00,940
você apenas copiou meu código e, em seguida, configurei essa matriz de produtos aqui, onde tenho muitos de produtos fictícios

74
00:06:00,940 --> 00:06:07,150
e agora é importante, obtemos o ID do produto, obtivemos o ID do proprietário, obtivemos o título e você deve

75
00:06:07,150 --> 00:06:12,100
verificar se o modelo do seu produto está configurado para que esse pedido esteja correto.

76
00:06:12,130 --> 00:06:19,630
Então, aqui temos o título, depois temos o imageUrl como o quarto argumento que você recebe, e você tem a descrição

77
00:06:19,630 --> 00:06:23,590
como o quinto e o preço como o último argumento.

78
00:06:23,590 --> 00:06:30,250
Portanto, verifique se o modelo do seu produto está configurado da maneira que este é a ordem dos argumentos.

79
00:06:30,250 --> 00:06:31,690
É isso que você

80
00:06:31,930 --> 00:06:34,050
tem aqui. No final, exporto essa matriz

81
00:06:34,070 --> 00:06:38,160
como padrão e, portanto, agora neste redutor de produtos, podemos simplesmente importar isso.

82
00:06:38,170 --> 00:06:47,080
Assim, podemos importar produtos, nossa lista de produtos fictícios da pasta de dados e, a

83
00:06:47,080 --> 00:06:52,750
partir dos dados fictícios. js e podemos simplesmente inicializar nossos produtos

84
00:06:52,750 --> 00:06:59,410
disponíveis com produtos aqui por enquanto e os produtos para usuários também podem ser inicializados com isso, embora, para os

85
00:06:59,440 --> 00:07:06,310
produtos para usuários, exista uma pequena diferença que eu queira fazer, desejo filtrá-los por um determinado ID do proprietário porque,

86
00:07:06,310 --> 00:07:12,820
no final, nem todos os produtos serão criados por nós. Em vez disso, filtrarei essa matriz fictícia e analisarei

87
00:07:12,820 --> 00:07:19,420
todos os produtos que incluem apenas produtos na minha matriz de produtos de usuário em que o ID do proprietário

88
00:07:19,420 --> 00:07:26,500
é igual a U1 que, se você der uma olhada nos dados fictícios, é o caso de alguns produtos, não para todos

89
00:07:26,500 --> 00:07:26,960
eles.

90
00:07:27,010 --> 00:07:32,650
Alguns deles têm o ID do proprietário do U1 e esses serão os produtos que eu uso aqui como

91
00:07:32,650 --> 00:07:39,010
produtos para usuários, como uma configuração fictícia. com isso, nosso redutor para os produtos está configurado aqui. podemos ignorar as ações dos produtos no momento,

92
00:07:39,100 --> 00:07:45,070
é claro que adicionaremos algumas mais tarde e agora podemos acessar o aplicativo. js e configure o Redux

93
00:07:45,070 --> 00:07:46,450
também.

94
00:07:46,450 --> 00:07:50,100
Para isso, precisamos importar algo do Redux

95
00:07:50,140 --> 00:07:54,720
e, claro, também precisamos importar algo do React Redux.

96
00:07:54,970 --> 00:07:58,870
Agora, isso é algo que precisamos importar do Redux aqui e

97
00:07:58,870 --> 00:08:04,060
que é, obviamente, a função create store e as funções combinadas de redutores, para

98
00:08:04,060 --> 00:08:08,910
que possamos criar um redutor raiz. No momento, é claro que temos apenas

99
00:08:08,920 --> 00:08:12,610
um redutor, mas como mencionei neste aplicativo, na verdade, teremos vários redutores

100
00:08:12,610 --> 00:08:18,300
no final, então aqui você definitivamente precisa combinar seus redutores e, a partir do React Redux, precisamos do componente

101
00:08:18,310 --> 00:08:25,750
de provedor que envolvemos em torno de nosso aplicativo para fornecer algo. É claro que também precisaremos importar o redutor

102
00:08:25,750 --> 00:08:33,600
de produtos ou, no entanto, você deseja nomeá-lo da pasta da loja, dos redutores e do arquivo de

103
00:08:33,660 --> 00:08:39,940
produtos, para que possamos criar nosso redutor de raiz posteriormente, chamando redutores combinados, onde

104
00:08:40,000 --> 00:08:48,490
então passar um objeto onde mapeamos, digamos para produtos, mas isso depende de você, nosso redutor de produtos e, mais

105
00:08:48,520 --> 00:08:55,330
tarde, adicionaremos mais redutores lá e, em seguida, poderemos criar nossa loja com create store e,

106
00:08:55,330 --> 00:09:03,280
no final, usaremos nosso redutor de raiz como um argumento e, posteriormente, lá embaixo no código jsx, criarei meu

107
00:09:03,970 --> 00:09:11,230
componente de provedor entre as tags de abertura e fechamento; depois, também terei minha tela mais tarde;

108
00:09:11,230 --> 00:09:17,900
no momento, não teremos nada lá, isso não é válido jsx a propósito, mas vamos corrigi-lo

109
00:09:17,920 --> 00:09:23,080
mais tarde e para o componente provedor, é claro que temos que

110
00:09:23,080 --> 00:09:29,200
definir o suporte da loja e configurá-lo como a constante da loja ou a

111
00:09:29,200 --> 00:09:36,180
loja em geral que estamos criando aqui. Com isso, o Redux deve ser configurado, com o qual mais tarde poderemos acessá-lo

112
00:09:36,210 --> 00:09:42,120
aqui na tela de visão geral dos produtos e, com isso, é claro, o próximo passo também é adicionar navegação para que possamos

113
00:09:42,120 --> 00:09:46,670
ver a tela de visão geral do produto. Então, vamos continuar trabalhando nessas etapas a

114
00:09:46,710 --> 00:09:47,190
seguir.