1 00:00:02,250 --> 00:00:08,070 Continuaremos trabalhando no aplicativo que construímos no último módulo do curso com nossas receitas aqui e 2 00:00:08,070 --> 00:00:15,070 com os filtros que poderíamos definir e assim por diante, e há duas coisas que precisamos adicionar onde precisaremos do Redux. 3 00:00:15,090 --> 00:00:21,870 Uma é que, na verdade, podemos marcar uma receita como favorita clicando no ícone de estrela, que na verdade a marca como 4 00:00:21,870 --> 00:00:27,900 favorita e que também mudamos esse ícone para mostrar se essa já é uma favorita ou não, mas, mais 5 00:00:27,900 --> 00:00:28,980 importante, que podemos 6 00:00:28,980 --> 00:00:35,400 ver essa receita como favorita aqui na guia Favoritos. E a outra coisa em que precisaremos do Redux 7 00:00:35,400 --> 00:00:41,280 está aqui nos filtros, quando definimos um filtro e, em seguida, salvamos isso, é claro 8 00:00:41,280 --> 00:00:49,080 que isso deve ter um efeito nas refeições que estamos carregando aqui na guia refeições na lista de refeições quando selecionamos 9 00:00:49,080 --> 00:00:51,470 uma categoria. Aí 10 00:00:51,500 --> 00:00:58,880 deve refletir-se o que colocamos nos filtros. Então é nisso que trabalhamos, para o que precisaremos do Redux e 11 00:00:58,880 --> 00:01:02,300 para isso, vamos instalar o Redux e começar a usá-lo. 12 00:01:03,350 --> 00:01:07,760 Para começar com o Redux, vou encerrar meu servidor expo 13 00:01:07,760 --> 00:01:12,830 aqui, o processo de inicialização do npm, vou encerrá-lo temporariamente e instalar 14 00:01:12,860 --> 00:01:15,030 um pacote, que seria o 15 00:01:15,110 --> 00:01:22,460 Redux e, além do Redux, também precisamos instalar o React Redux, porque também é necessário trabalhar com 16 00:01:22,460 --> 00:01:23,760 o Redux. 17 00:01:23,780 --> 00:01:28,700 Portanto, os dois pacotes precisam ser instalados aqui e, enquanto estão sendo instalados, já podemos começar 18 00:01:28,700 --> 00:01:34,280 a trabalhar um pouco nos nossos arquivos de código, porque neste projeto, quero adicionar uma nova pasta agora e 19 00:01:34,280 --> 00:01:35,780 é a pasta store. 20 00:01:35,780 --> 00:01:40,810 Agora você pode nomear essa pasta como desejar, não precisa ser nomeada como store, o Redux não 21 00:01:41,000 --> 00:01:46,970 se importa, mas é a pasta na qual quero gerenciar minha configuração do Redux, porque o Redux é tudo sobre esse 22 00:01:46,970 --> 00:01:48,390 repositório central de estados. 23 00:01:48,530 --> 00:01:56,150 Portanto, aqui na pasta da loja, agora podemos começar a usar o Redux e não abordarei o Redux com mais detalhes aqui. Tenho 24 00:01:56,150 --> 00:01:57,230 um curso completo 25 00:01:57,260 --> 00:02:02,510 sobre React e Redux para isso, se você quiser saber os detalhes disso, por Neste 26 00:02:02,570 --> 00:02:08,450 curso, assumo o conhecimento prévio sobre React e Redux e, portanto, isso será apenas uma breve atualização. 27 00:02:09,890 --> 00:02:14,980 No final, o redux diz respeito a redutores, ações e, em seguida, à construção de uma loja com base nesses 28 00:02:14,980 --> 00:02:16,010 redutores e ações. 29 00:02:16,360 --> 00:02:23,230 Agora, aqui na pasta da loja, adicionarei uma pasta de ações e uma pasta de redutores, na verdade, teremos apenas uma 30 00:02:23,320 --> 00:02:29,320 ação e um arquivo redutor neste projeto, mas se você tiver mais arquivos do que isso, terá subpastas 31 00:02:29,320 --> 00:02:34,180 separadas podem ser uma boa idéia para mantê-la organizada e é por isso que 32 00:02:34,180 --> 00:02:39,820 as crio aqui, mesmo que para esse aplicativo simples, não precisaríamos disso porque não teremos muitos arquivos. 33 00:02:39,880 --> 00:02:44,230 Vamos começar com o redutor. Na pasta 34 00:02:44,350 --> 00:02:52,630 redutora aqui, vou adicionar minhas refeições. arquivo js e esse foi o arquivo em que fui gerenciar minha lógica de atualização do estado redutor 35 00:02:52,630 --> 00:02:53,310 de refeições. 36 00:02:53,410 --> 00:02:58,750 Portanto, esse é o arquivo onde escreveremos a lógica para marcar uma refeição como 37 00:02:58,750 --> 00:03:01,330 favorita e para gerenciar nossos filtros. 38 00:03:01,430 --> 00:03:04,700 Agora, um redutor no React é apenas uma função. Então, 39 00:03:04,700 --> 00:03:10,550 aqui vou criar uma função, nomeie-o como redutor de refeições, o nome depende totalmente de você e essa função 40 00:03:10,610 --> 00:03:17,360 receberá dois argumentos - o estado, o instantâneo do estado atual no qual você pode criar ativar e derivar um novo 41 00:03:17,360 --> 00:03:22,250 estado, porque um redutor no final terá que retornar um novo estado que é tomado 42 00:03:22,370 --> 00:03:24,860 pelo Redux e armazenado em sua loja. 43 00:03:24,860 --> 00:03:30,230 Então você obtém o atual, o antigo estado aqui e a ação porque a função redutora aqui 44 00:03:30,230 --> 00:03:31,940 é executada pelo Redux 45 00:03:31,940 --> 00:03:36,710 sempre que uma nova ação é despachada e, portanto, temos acesso à ação aqui para 46 00:03:36,710 --> 00:03:40,370 que possamos descobrir se precisamos agir e o que precisamos fazer. 47 00:03:40,520 --> 00:03:44,960 Portanto, dentro dessa função, no final, você precisa retornar um novo estado, em sua forma mais 48 00:03:44,960 --> 00:03:49,220 simples, é claro que significa que retornamos o estado atual, o que, por outro lado, significa 49 00:03:49,220 --> 00:03:52,470 que esse redutor não faz nada útil, mas vamos mude isso. 50 00:03:52,650 --> 00:03:58,170 Agora, quando executamos nosso aplicativo pela primeira vez, também queremos configurar um estado inicial que é 51 00:03:58,170 --> 00:04:00,000 usado inicialmente, para que inicialize 52 00:04:00,000 --> 00:04:06,510 nosso estado quando o aplicativo for iniciado e, para isso, adicionarei uma nova constante de estado inicial aqui que 53 00:04:06,510 --> 00:04:14,970 contém um Javascript simples objeto e lá, quero armazenar uma lista de minhas refeições e, em seguida, também uma lista de minhas refeições filtradas, porque 54 00:04:15,120 --> 00:04:22,060 precisaremos de ambas - uma lista de todas as refeições e uma lista das refeições que se encaixam nos filtros 55 00:04:22,060 --> 00:04:31,130 que o usuário definiu e eu também quero ter minhas refeições favoritas aqui. Portanto, três tipos de matrizes de refeições que eu guardo no final e, 56 00:04:31,130 --> 00:04:31,610 é 57 00:04:31,670 --> 00:04:34,800 claro, essa é apenas uma abordagem possível que você 58 00:04:34,830 --> 00:04:40,340 pode adotar aqui. Certamente, podemos encontrar outras maneiras de gerenciar nossos dados aqui, mas eu gosto dessa. 59 00:04:40,590 --> 00:04:53,140 Agora, o que vou precisar nesse arquivo são os dados fictícios das minhas refeições, então importarei as refeições da minha pasta de dados 60 00:04:53,140 --> 00:04:59,860 e daí dos dados fictícios. arquivo js e inicializarei as refeições aqui com minha matriz de dados fictícios de refeições. 61 00:05:00,550 --> 00:05:06,220 As refeições filtradas também são inicializadas com isso, porque, inicialmente, quando o aplicativo é 62 00:05:06,330 --> 00:05:11,840 iniciado, não temos configuração de filtros. As refeições favoritas, por outro lado, inicialmente são uma matriz vazia porque, novamente, quando o 63 00:05:11,840 --> 00:05:13,130 aplicativo é iniciado, não temos refeições favoritas. 64 00:05:13,130 --> 00:05:18,230 É claro que em um aplicativo real, convém armazenar esse estado em um servidor, para que, quando 65 00:05:18,230 --> 00:05:21,400 o usuário feche o aplicativo e volte mais tarde, você 66 00:05:21,470 --> 00:05:23,230 não comece do zero novamente, mas 67 00:05:23,240 --> 00:05:28,580 isso não é algo que faremos aqui, você aprenderemos como chegar a um servidor, salvar dados e carregá-los 68 00:05:28,610 --> 00:05:29,440 em módulos 69 00:05:29,460 --> 00:05:33,040 separados posteriormente neste curso. Aqui, manteremos isso simples ao focar no Redux. 70 00:05:33,140 --> 00:05:39,170 Portanto, este é o meu estado inicial, aqui nesta função agora podemos usar uma sintaxe Javascript onde 71 00:05:39,230 --> 00:05:44,690 atribuímos nosso estado inicial como um valor padrão para o argumento state, o que significa que 72 00:05:44,690 --> 00:05:51,290 quando essa função redutora é executada e o estado é indefinido, é o caso quando O Redux executa nosso 73 00:05:51,590 --> 00:05:53,700 redutor pela primeira vez. Começaremos 74 00:05:53,750 --> 00:05:56,330 com esse estado inicial, de modo que 75 00:05:56,330 --> 00:06:02,760 carregaremos automaticamente nosso estado inicial, por assim dizer, porque quando o Redux for iniciado e iniciado, haverá uma ação 76 00:06:02,790 --> 00:06:07,910 inicial despachada. costumava percorrer o redutor uma vez e isso carregaria nosso estado inicial. 77 00:06:07,980 --> 00:06:14,160 Assim, com isso, podemos trabalhar com algum estado inicial que seja bom, mas que por si só não nos 78 00:06:14,160 --> 00:06:16,190 ajude muito. No momento, é 79 00:06:16,200 --> 00:06:17,070 isso, agora 80 00:06:17,250 --> 00:06:23,640 vamos conectar esse redutor ao Redux, para que possamos realmente usar nossa loja Redux em qualquer lugar do aplicativo antes 81 00:06:23,640 --> 00:06:30,860 de começarmos a enviar ações e fazer coisas mais úteis no redutor. Portanto, por enquanto, exportarei o redutor 82 00:06:30,860 --> 00:06:39,890 de refeições como padrão aqui e agora no aplicativo. js, que é o arquivo em que todo 83 00:06:39,890 --> 00:06:42,190 o aplicativo é iniciado, 84 00:06:42,230 --> 00:06:47,960 precisamos configurar nossa loja Redux. Para 85 00:06:48,080 --> 00:06:57,270 isso aqui, importamos create store do Redux. 86 00:06:57,510 --> 00:07:02,010 Além disso, precisaremos importar redutores combinados de lá. 87 00:07:02,010 --> 00:07:06,090 Isso nos permite criar uma loja agora, precisaremos apenas do nosso redutor, 88 00:07:06,090 --> 00:07:12,610 então aqui vou importar meu redutor de refeições e agora aponte para a pasta da loja, a pasta dos redutores 89 00:07:12,610 --> 00:07:15,280 e as refeições. arquivo js 90 00:07:15,330 --> 00:07:26,520 e agora talvez aqui, podemos criar nossa loja aqui chamando create store. Agora, create store recebe um redutor no final, que 91 00:07:26,640 --> 00:07:31,910 você precisa passar. Agora, é claro, aqui temos um redutor 92 00:07:31,920 --> 00:07:36,780 e poderíamos repassá-lo, mas em aplicativos maiores, você pode ter mais de um redutor porque 93 00:07:36,780 --> 00:07:43,710 geralmente possui redutores para as diferentes áreas de recursos do seu aplicativo, um para autenticação e outro para seus produtos, um 94 00:07:43,710 --> 00:07:49,740 para, digamos, a área de suporte do seu aplicativo e você precisa mesclar todos esses redutores únicos, esses diferentes 95 00:07:49,800 --> 00:07:53,970 redutores em um redutor de raiz e é isso que a função de 96 00:07:54,000 --> 00:07:58,800 redutores combinados faz; novamente, aqui não precisaríamos, porque só temos um redutor mas, para 97 00:07:58,800 --> 00:08:01,060 já mostrar a abordagem que você 98 00:08:01,140 --> 00:08:07,890 pode usar com vários redutores, eu a usarei aqui também. Então, terei meu redutor de raiz aqui, que crio 99 00:08:07,890 --> 00:08:14,460 chamando redutores combinados, redutores combinados pega um objeto Javascript onde agora mapeamos nossos redutores únicos, nossos diferentes 100 00:08:14,460 --> 00:08:16,130 redutores para chaves. 101 00:08:16,130 --> 00:08:21,870 Por exemplo, aqui, poderíamos tomar as refeições como uma chave, mas esse nome depende totalmente de você e 102 00:08:22,740 --> 00:08:24,900 conectá-lo ao redutor de refeições, assim. 103 00:08:24,900 --> 00:08:32,760 O que isso faz é que, no final, mescla esse redutor de refeições nesse redutor de raiz e, mais tarde, 104 00:08:32,760 --> 00:08:37,380 poderemos trabalhar com o estado gerenciado pelo redutor de refeições, portanto, 105 00:08:37,380 --> 00:08:43,440 com esse estado que é inicializado assim, com a ajuda dessas refeições propriedade, poderemos acessar 106 00:08:43,440 --> 00:08:44,900 esse estado, essa 107 00:08:44,910 --> 00:08:49,630 parte do estado com essa propriedade posteriormente, mas você verá tudo isso. 108 00:08:49,740 --> 00:08:54,780 Então esse é o nosso redutor de raiz e agora precisamos passar pelo redutor de raiz para 109 00:08:54,780 --> 00:08:57,900 criar uma loja, isso nos dá uma loja e agora? 110 00:08:57,900 --> 00:09:03,210 Agora, essa loja precisa ser fornecida ao nosso aplicativo e, para isso, precisamos 111 00:09:03,240 --> 00:09:06,960 do outro pacote que instalamos, o React Redux. 112 00:09:07,170 --> 00:09:18,300 A partir daí, podemos importar o componente provedor, provedor como este. Em seguida, agrupamos o provedor em torno de nosso componente de aplicativo raiz no 113 00:09:18,390 --> 00:09:25,200 final, portanto, em torno do componente superior, que contém todos os outros componentes que eventualmente irão interagir 114 00:09:25,200 --> 00:09:30,000 com nossa loja e o navegador de refeições é muito bom para 115 00:09:30,060 --> 00:09:36,420 isso, porque contém todas as nossas telas, portanto, contém todas as componentes que eventualmente precisaremos para 116 00:09:36,480 --> 00:09:44,230 despachar ações ou acessar nosso estado, portanto leia-o. Portanto, aqui envolvemos o componente do provedor em torno do navegador de 117 00:09:44,230 --> 00:09:50,440 refeições e agora o provedor leva uma propriedade importante, um suporte que você precisa passar e esse é o suporte da 118 00:09:50,680 --> 00:09:54,590 loja e, claro, lá, como um valor que passamos por nossa loja aqui. 119 00:09:54,640 --> 00:10:01,660 Portanto, essa loja constante que mantém a loja criada é passada para o fornecedor da loja e nos bastidores, isso 120 00:10:01,660 --> 00:10:07,990 nos dá tudo o que precisamos para interagir agora com o Redux, com a loja Redux em qualquer 121 00:10:08,050 --> 00:10:11,520 componente, tela ou outro componente em nosso aplicativo . 122 00:10:13,360 --> 00:10:18,630 Agora, deixe-me reiniciar isso com o npm start e, por enquanto, isso não fará 123 00:10:18,630 --> 00:10:21,430 muita diferença, mas nosso aplicativo certamente ainda 124 00:10:21,430 --> 00:10:29,140 funcionará, por isso não deve travar por causa disso, então vamos verificar se esse é o caso e vamos recarregue aqui, 125 00:10:29,170 --> 00:10:38,370 pressionamos r duas vezes no Android e comando r no iOS e vamos ver onde isso ainda carrega como deveria, sim, isso parece bom aqui no 126 00:10:38,730 --> 00:10:44,860 iOS e estou bastante confiante de que também carregará bem no Android, Sim, isso também está funcionando. 127 00:10:44,890 --> 00:10:46,890 Então agora o Redux está 128 00:10:46,900 --> 00:10:49,990 configurado, nossa loja é inicializada, mas não a estamos usando. 129 00:10:49,990 --> 00:10:54,520 Portanto, como próximo passo, vamos ter certeza de usar nossa loja antes de tomarmos cuidado com as ações e 130 00:10:54,520 --> 00:10:56,200 realizarmos um trabalho real no redutor.