1 00:00:02,420 --> 00:00:07,190 É claro que queremos despachar essa ação na tela de filtros, porque é aí que 2 00:00:07,190 --> 00:00:08,870 definimos todos esses filtros. 3 00:00:08,980 --> 00:00:14,980 No momento, nós os gerenciamos aqui no estado interno e isso permanecerá assim, porque definitivamente precisamos de nossos 4 00:00:15,430 --> 00:00:17,490 filtros, mas agora é claro 5 00:00:17,680 --> 00:00:21,610 que quero despachar uma ação quando o botão Salvar for pressionado. 6 00:00:21,610 --> 00:00:26,210 Felizmente, eu já tenho a conexão com o cabeçalho configurada com efeito de uso e com parâmetros, 7 00:00:26,530 --> 00:00:31,020 então tudo o que precisamos fazer é substituir o log do console aqui pelo despacho. 8 00:00:31,180 --> 00:00:39,280 Agora, é claro, para usar o dispatch, primeiro precisamos importar o gancho de despacho de uso aqui do React Redux 9 00:00:39,330 --> 00:00:41,350 assim e agora podemos usar 10 00:00:41,350 --> 00:00:46,490 esse gancho aqui para obter acesso à função de despacho, para que const 11 00:00:46,910 --> 00:00:51,530 dispatch seja igual a use o dispatch executado como uma função 12 00:00:51,530 --> 00:00:57,070 e agora podemos chamar despacho aqui para despachar uma ação e, portanto, também precisamos 13 00:00:57,070 --> 00:01:01,700 adicionar despacho como uma dependência, mas o React Redux garantirá que 14 00:01:01,700 --> 00:01:02,910 isso nunca 15 00:01:02,990 --> 00:01:06,110 mude. Portanto, isso nunca provocará uma nova renderização, 16 00:01:06,290 --> 00:01:07,950 nós temos que adicioná-lo. 17 00:01:08,120 --> 00:01:23,720 Portanto, isso é despacho, agora importante, também precisamos importar meu criador de ações das refeições das ações da loja e, claro, estou falando do criador de ações dos filtros de conjunto, porque preciso chamar isso 18 00:01:23,720 --> 00:01:25,730 aqui para criar uma 19 00:01:25,730 --> 00:01:33,870 ação que passo a ser despachada para lá e defina filtros uma vez que este filtro aplicado objeto 20 00:01:33,960 --> 00:01:40,170 encaminhar e lá eu tenho sem glúten, sem lactose, vegan e isso deve ser 21 00:01:40,170 --> 00:01:47,550 apenas vegetariano, importante, porque as chaves que você configurou aqui devem ser as que você procura 22 00:01:47,550 --> 00:01:52,380 em seu redutor , caso contrário, isso não funcionará, importante. 23 00:01:52,380 --> 00:01:55,110 Portanto, verifique se são 24 00:01:55,110 --> 00:01:58,820 iguais, caso contrário, essa lógica não funcionará. 25 00:01:58,840 --> 00:02:03,370 Portanto, agora estamos despachando isso sempre que o botão Salvar é pressionado, e isso 26 00:02:03,370 --> 00:02:09,220 deve ajustar nossas refeições filtradas e isso deve ser refletido na tela de categoria de refeições, porque estamos 27 00:02:09,220 --> 00:02:12,010 recuperando as refeições filtradas. Vamos tentar, vamos 28 00:02:12,040 --> 00:02:13,340 salvar isso 29 00:02:13,750 --> 00:02:17,590 e, por exemplo, esse hambúrguer, provavelmente não vegano. 30 00:02:18,010 --> 00:02:29,120 Então vamos aos filtros, ative o vegan, salve isso e recebo um erro, não consigo encontrar ações variáveis, acionadas pelo redutor de 31 00:02:29,120 --> 00:02:30,010 refeições, 32 00:02:30,020 --> 00:02:35,710 então vamos dar uma olhada nisso. Sim, não são ações, é claro que 33 00:02:35,720 --> 00:02:37,020 são ações, 34 00:02:37,040 --> 00:02:39,230 esse é o nome do argumento. 35 00:02:39,230 --> 00:02:40,610 Portanto, isso deve ser ação, 36 00:02:40,610 --> 00:02:42,120 pequeno erro, apenas um erro 37 00:02:42,140 --> 00:02:43,150 de digitação, 38 00:02:43,580 --> 00:02:44,660 vamos tentar outra vez. 39 00:02:44,690 --> 00:02:46,220 Volte aos filtros, ative 40 00:02:46,220 --> 00:02:52,070 o vegan, salve isso e agora vá para refeições, hambúrgueres e eu não os vejo aqui, o 41 00:02:52,090 --> 00:02:58,710 que é bom, porque isso significa que é filtrado. Meu espaguete com molho de tomate, 42 00:02:58,710 --> 00:03:04,310 ainda está lá, porque obviamente é vegano, pelo menos sem queijo. 43 00:03:04,500 --> 00:03:07,680 Então está aí, em alemão o schnitzel se foi, rápido e fácil, 44 00:03:07,670 --> 00:03:10,050 a salada está lá, o que faz sentido. 45 00:03:10,050 --> 00:03:12,060 Vamos também tentar outro filtro, sem 46 00:03:12,060 --> 00:03:13,110 glúten, agora 47 00:03:13,110 --> 00:03:15,030 o espaguete deve ter sumido com 48 00:03:15,030 --> 00:03:16,350 certeza, então vamos dar 49 00:03:16,350 --> 00:03:18,150 uma olhada, sim, eles se foram. 50 00:03:18,150 --> 00:03:19,140 A salada ainda está 51 00:03:19,140 --> 00:03:20,030 lá, o 52 00:03:20,040 --> 00:03:24,240 espaguete acabou, então essa lógica parece funcionar. Agora, importante, se eu desabilitei 53 00:03:24,450 --> 00:03:32,040 o glúten e, portanto, vejo meus espaguetes novamente, se os adiciono como favorito e depois adiciono esse filtro novamente, 54 00:03:32,070 --> 00:03:41,160 é claro que durante as refeições eles desaparecem, nos favoritos eu os vejo porque essa é a lógica configuramos que os favoritos 55 00:03:41,160 --> 00:03:46,860 não recebem dados de nossas refeições filtradas, mas se preocupam se é um favorito 56 00:03:46,860 --> 00:03:48,090 ou não. 57 00:03:48,210 --> 00:03:53,370 É claro que você pode alterar essa lógica, mas aqui a lógica é o que é e apenas 58 00:03:53,370 --> 00:03:57,980 as refeições nas categorias aqui são filtradas de acordo com os filtros que você configurou aqui. 59 00:03:58,200 --> 00:04:04,650 Agora, seria bom ter uma pequena mensagem de fallback aqui se não tivermos dados por 60 00:04:05,130 --> 00:04:06,840 causa de nossos 61 00:04:06,840 --> 00:04:17,310 filtros e, portanto, na tela de categoria de refeições, também quero verificar aqui se a duração das refeições exibida é zero, o que significa que não 62 00:04:17,310 --> 00:04:26,170 tenho refeições para exibir e, em seguida, quero retornar uma visualização aqui com meu texto padrão, na verdade, e isso significa que 63 00:04:26,170 --> 00:04:34,980 precisamos importar ambos, precisamos importar uma visualização e também precisaremos da folha de estilo do React Native e importar o componente 64 00:04:35,070 --> 00:04:46,570 de texto padrão de texto padrão dos componentes e adicione um estilo aqui, styles. 65 00:04:50,270 --> 00:04:56,200 o conteúdo e o texto padrão que exibimos não podem ser encontrados, talvez 66 00:04:56,380 --> 00:04:59,310 verifique seus filtros, apenas uma dica 67 00:04:59,310 --> 00:05:05,630 de que talvez seus filtros estejam desativando as receitas que você deve ver aqui. 68 00:05:05,640 --> 00:05:13,120 Agora, vamos apenas adicionar os estilos constantes aqui, onde criamos uma nova folha de estilo, e lá, 69 00:05:13,160 --> 00:05:20,390 quero configurar essa chave de conteúdo onde uso o flex one e, em seguida, centralizar o 70 00:05:20,390 --> 00:05:26,640 conteúdo horizontalmente e verticalmente com a ajuda dessas propriedades do flexbox, assim. 71 00:05:28,100 --> 00:05:32,570 Se agora tentarmos e talvez testar isso no Android, apenas para 72 00:05:32,570 --> 00:05:43,440 misturar as coisas, mesmo que seja um pouco mais lento, posso ir aos meus filtros lá, definir sem glúten, voltar para minhas refeições, italiano, portanto, isso não 73 00:05:43,440 --> 00:05:49,470 é lá, então eu recebo esta mensagem. Por outro lado, rápido e fácil, tenho 74 00:05:49,470 --> 00:05:53,320 uma refeição e, portanto, não recebo essa mensagem e, portanto, 75 00:05:53,400 --> 00:06:00,140 isso não parece muito ruim e, é claro, também vamos tentar desativar esse filtro novamente e 76 00:06:00,160 --> 00:06:05,980 voltar, aqui está o espaguete . Então, agora está tudo funcionando e é assim que podemos gerenciar nosso estado com o Redux.