1
00:00:02,360 --> 00:00:04,430
Como podemos usar nossa loja?

2
00:00:04,430 --> 00:00:11,240
Lembre-se de que, no final das contas, estou gerenciando minhas refeições, não minhas categorias, porque não temos nenhuma ação

3
00:00:11,240 --> 00:00:13,490
planejada que altere tudo, mas estou

4
00:00:13,670 --> 00:00:15,530
gerenciando minhas refeições aqui.

5
00:00:15,650 --> 00:00:22,990
Portanto, uma grande tarefa seria ir a qualquer lugar em nosso aplicativo, onde estamos importando refeições dos dados fictícios e nos livrar dessa importação

6
00:00:23,110 --> 00:00:26,970
e, em vez disso, retirar os dados de nossa loja, porque a

7
00:00:26,980 --> 00:00:32,650
diferença será que mais tarde podemos adicionar lógica à mudança os dados em nossa loja, enquanto nossos dados

8
00:00:32,650 --> 00:00:34,170
fictícios nunca serão alterados.

9
00:00:34,180 --> 00:00:38,980
Portanto, devemos importar dados de nossa loja, para depois adicionarmos lógica para manipular esses

10
00:00:39,280 --> 00:00:42,970
dados, por exemplo, para restringir as refeições que estamos exibindo.

11
00:00:42,980 --> 00:00:47,510
Então, onde precisamos das refeições? Na tela de

12
00:00:47,510 --> 00:00:52,130
categorias, não estamos importando refeições. Temos algumas outras importações das quais podemos nos livrar, mas isso é

13
00:00:52,130 --> 00:00:52,490
apenas

14
00:00:52,550 --> 00:00:53,840
uma observação, não estamos importando refeições.

15
00:00:53,870 --> 00:00:58,340
As categorias podem permanecer lá porque, novamente, não teremos nenhuma lógica que

16
00:00:58,490 --> 00:01:05,690
mude isso, para que possamos seguir em frente. A tela de categorias de refeições é uma história diferente, lá estamos importando

17
00:01:05,690 --> 00:01:09,530
refeições e agora o objetivo é livrar-se dessa importação e tirar as refeições da loja

18
00:01:09,530 --> 00:01:16,640
Redux, e a questão é: como fazemos isso? Novamente, o pacote React Redux nos ajuda com isso. A partir desse pacote

19
00:01:16,730 --> 00:01:25,010
React Redux, podemos importar algo, podemos importar um gancho, o gancho seletor de uso.

20
00:01:25,020 --> 00:01:32,210
Isso nos permite selecionar uma fatia do nosso estado, do nosso estado gerenciado globalmente e usá-lo neste componente.

21
00:01:32,220 --> 00:01:36,660
Agora, estou usando o gancho aqui, porque isso nos permite usar isso em um componente funcional.

22
00:01:36,660 --> 00:01:42,480
Você também pode estar ciente de outra abordagem na qual importa a função de conexão e encerra sua exportação com isso

23
00:01:42,480 --> 00:01:47,220
e usa o estado do mapa para props, envio de mapa para adereços, isso é algo que

24
00:01:47,220 --> 00:01:49,010
você pode usar também, absolutamente

25
00:01:49,020 --> 00:01:51,560
funcionará, mas isso é um pouco mais simples, então

26
00:01:51,580 --> 00:01:56,140
eu vou usar o seletor de uso aqui. Com isso adicionado, agora, quando

27
00:01:56,260 --> 00:01:59,510
usamos nossas refeições, não as usamos dessa maneira;

28
00:01:59,710 --> 00:02:07,270
agora podemos obtê-las com a ajuda do seletor de uso. Portanto, para derivar nossas refeições de exibição, o que

29
00:02:07,270 --> 00:02:15,400
farei aqui é criar uma nova constante, refeições disponíveis, talvez, o nome é com você e usar o seletor aqui assim, porque

30
00:02:15,400 --> 00:02:19,920
isso me recuperará dados do estado e retornará então é isso que

31
00:02:19,930 --> 00:02:25,450
eu vou armazenar aqui nesta constante, o seletor de valor e uso retornado assume uma

32
00:02:26,110 --> 00:02:29,920
função, uma função que será executada para nós pelo React Redux.

33
00:02:29,920 --> 00:02:36,430
Uma função que obtém o estado como argumento automaticamente, React Redux, que executa a função para nós,

34
00:02:36,430 --> 00:02:44,140
fornecerá o estado atual, o estado Redux atual para essa função e, em seguida, poderá retornar quaisquer dados que desejemos

35
00:02:44,200 --> 00:02:48,810
desse estado, daquele global global, e eu estou usando esses termos

36
00:02:48,850 --> 00:02:50,640
de forma intercambiável aqui.

37
00:02:52,910 --> 00:02:56,380
Então, como podemos recuperar dados desse estado aqui no corpo da função

38
00:02:56,420 --> 00:03:01,370
e estou usando a notação de seta de atalho aqui, no lado direito da seta, que é

39
00:03:01,370 --> 00:03:06,860
retornada automaticamente se não estiver envolto em chaves. Bom, para ter acesso a algo do estado,

40
00:03:06,860 --> 00:03:12,560
temos que voltar ao local onde criamos a loja, lá passo um redutor de raiz criado

41
00:03:12,560 --> 00:03:14,120
combinando todos os redutores.

42
00:03:14,150 --> 00:03:17,250
Novamente, temos apenas um, mas expliquei por que fiz isso.

43
00:03:17,300 --> 00:03:20,980
Agora, aqui temos essa chave, refeições que dependem totalmente de você, você

44
00:03:20,990 --> 00:03:22,640
pode nomear isso como quiser.

45
00:03:22,640 --> 00:03:29,030
Isso confere a esse segmento do nosso estado, que é gerenciado por esse redutor, um

46
00:03:29,030 --> 00:03:32,950
identificador, e agora podemos usá-lo para se apossar

47
00:03:33,020 --> 00:03:37,820
da parte do nosso estado pela qual esse redutor é responsável.

48
00:03:37,820 --> 00:03:45,070
Então, no final, um estado que se parecerá com esse, como esse estado inicial. Então, na tela de refeição da categoria,

49
00:03:45,070 --> 00:03:51,210
aqui eu acesso o estado. refeições ou o que você escolher como

50
00:03:51,310 --> 00:03:58,490
identificador em redutores combinados e, aqui, acessarei refeições filtradas. Não são as refeições que eu também teria

51
00:03:58,540 --> 00:04:03,380
lá, também temos as refeições aqui, mas eu quero respeitar os filtros definidos.

52
00:04:03,450 --> 00:04:06,690
No momento, não temos lógica para defini-los, mas

53
00:04:06,760 --> 00:04:12,970
com isso mudaremos no futuro, então aqui quero receber minhas refeições filtradas, para sempre ter as

54
00:04:12,970 --> 00:04:17,930
que realmente devo poder exibir, as que respeitam os filtros configurados pelo usuário

55
00:04:18,130 --> 00:04:25,420
e agora são as refeições disponíveis que desejo filtrar ainda mais aqui para encontrar a refeição para o ID da

56
00:04:25,420 --> 00:04:33,880
categoria que selecionei ou as refeições para a categoria que selecionei. Com isso, não há mais refeições em maiúsculas

57
00:04:33,890 --> 00:04:39,500
neste arquivo, apenas minúsculas aqui e nos livramos dessa importação com

58
00:04:39,500 --> 00:04:45,890
sucesso, agora vamos seguir em frente. Na tela favorita, também estamos importando refeições

59
00:04:45,890 --> 00:04:46,650
e,

60
00:04:46,670 --> 00:04:54,770
como antes, devemos nos livrar disso, então vamos fazer isso. Em vez disso, também como antes, usarei o seletor de uso

61
00:04:54,770 --> 00:05:02,720
do React Redux para obter minhas refeições na loja e, portanto, aqui onde uso as refeições, receberei minhas refeições disponíveis com o

62
00:05:02,720 --> 00:05:04,260
seletor de uso.

63
00:05:04,310 --> 00:05:10,370
Novamente, isso me dá um estado e eu posso acessar o estado. refeições. refeições filtradas, mas agora, na

64
00:05:10,370 --> 00:05:11,240
verdade, aqui

65
00:05:11,240 --> 00:05:16,250
para os favoritos, não quero respeitar nenhum filtro definido porque, na minha opinião, faz

66
00:05:16,250 --> 00:05:21,000
sentido que, quando queremos ver nossos favoritos, sempre vejamos todos os favoritos.

67
00:05:21,050 --> 00:05:25,930
É claro que você poderia ter uma lógica diferente e optar pelas refeições filtradas, mas vou usar apenas as

68
00:05:26,090 --> 00:05:28,490
refeições aqui, então. refeições. as refeições

69
00:05:28,520 --> 00:05:36,950
podem parecer estranhas, isso seleciona a fatia do nosso estado e, nessa fatia, essa coisa de refeições aqui acessa essa propriedade de refeições na nossa fatia

70
00:05:36,950 --> 00:05:37,940
do estado, mas

71
00:05:40,820 --> 00:05:46,180
é claro que se você der uma olhada no seu redutor, isso só faz parte do

72
00:05:46,180 --> 00:05:51,050
sentido certo porque temos uma propriedade de refeições favorita aqui e, de fato, temos.

73
00:05:51,330 --> 00:05:58,260
Então, na verdade, não precisamos mais filtrar nossos favoritos assim e isso era apenas um filtro fictício de qualquer

74
00:05:58,260 --> 00:06:04,710
maneira, sempre levava as refeições com m1 e m2 como um ID. Em vez disso, para nossas

75
00:06:04,760 --> 00:06:10,310
refeições favoritas, podemos obtê-las acessando aqui, em nossas refeições, defina as refeições favoritas, portanto, essa

76
00:06:10,310 --> 00:06:16,880
propriedade, porque mais tarde gerenciaremos as refeições favoritas em uma matriz separada em nossa loja, para que seja

77
00:06:16,880 --> 00:06:18,280
ainda mais fácil

78
00:06:18,290 --> 00:06:23,290
aqui, com um código muito curto. Então, com isso, nos livramos da importação de refeições aqui

79
00:06:23,300 --> 00:06:25,460
também, vamos para a tela de filtros.

80
00:06:25,460 --> 00:06:27,080
Não há importação de refeições aqui,

81
00:06:27,170 --> 00:06:29,840
a tela de detalhes da refeição, por outro lado, possui uma.

82
00:06:29,840 --> 00:06:31,280
Então, aqui eu quero

83
00:06:31,310 --> 00:06:33,220
me livrar dele e agora

84
00:06:33,290 --> 00:06:39,800
aqui precisaremos da propriedade de outras refeições que mostrei um segundo atrás, porque novamente aqui, podemos usar o seletor

85
00:06:40,610 --> 00:06:51,720
de React Redux para selecionar nossas refeições, porque aqui, agora temos nossa componente aqui onde usamos nossas refeições e lá, eu quero ter uma matriz com todas as refeições, porque estou tentando

86
00:06:51,810 --> 00:06:59,280
carregar uma única refeição por ID e, portanto, minha base, minha matriz na qual procuro essa ID deve, obviamente, ser uma matriz

87
00:06:59,370 --> 00:07:04,440
com todas as refeições e não filtrada porque não me importo com nenhum conjunto

88
00:07:04,440 --> 00:07:09,900
de filtros, aqui estou procurando uma refeição específica com um ID específico e quero obter uma

89
00:07:09,900 --> 00:07:16,140
lista completa de refeições e é por isso que precisaremos disso sem filtro lista de refeições que estamos

90
00:07:16,140 --> 00:07:17,180
gerenciando aqui.

91
00:07:20,140 --> 00:07:27,880
Portanto, aqui, agora podemos obter nossas refeições disponíveis com o seletor de uso e, novamente,

92
00:07:27,880 --> 00:07:34,360
usamos as refeições do estado. refeições agora de verdade e agora podemos usar as

93
00:07:34,420 --> 00:07:41,070
refeições disponíveis aqui para encontrar a refeição com esse ID. Com isso, nos livramos dessa importação aqui também, também podemos remover a importação de

94
00:07:41,070 --> 00:07:44,090
botões agora que a vejo, mas na verdade teremos um problema.

95
00:07:44,430 --> 00:07:51,780
Você pode perceber que, no cabeçalho, eu também tento encontrar uma refeição da matriz de refeições

96
00:07:51,780 --> 00:07:53,770
e removemos essa importação.

97
00:07:53,790 --> 00:07:59,010
Agora, o problema também está aqui nas opções de navegação, não podemos usar o gancho seletor de uso, porque

98
00:07:59,010 --> 00:08:04,170
você só pode usar ganchos dentro de outros ganchos ou dentro de componentes funcionais e isso não é

99
00:08:04,170 --> 00:08:08,340
nada disso, é uma função normal, não funcional componente e também não um gancho.

100
00:08:08,340 --> 00:08:11,870
Portanto, não podemos usar o seletor de uso aqui para que não funcione.

101
00:08:11,900 --> 00:08:17,400
Agora é claro que poderíamos trazer de volta a importação de refeições, mas isso seria um pouco barato, porque em

102
00:08:17,400 --> 00:08:22,710
aplicativos reais, você às vezes terá aquela situação em que precisa de dados da sua loja Redux nos dados

103
00:08:22,710 --> 00:08:23,160
de

104
00:08:23,190 --> 00:08:28,470
navegação e, portanto, na próxima palestra, resolver isso e garantir que também possamos ter acesso a isso aqui.