Continuaremos trabalhando no aplicativo que construímos no último módulo do curso com nossas receitas aqui e
com os filtros que poderíamos definir e assim por diante, e há duas coisas que precisamos adicionar onde precisaremos do Redux.
Uma é que, na verdade, podemos marcar uma receita como favorita clicando no ícone de estrela, que na verdade a marca como
favorita e que também mudamos esse ícone para mostrar se essa já é uma favorita ou não, mas, mais
importante, que podemos
ver essa receita como favorita aqui na guia Favoritos. E a outra coisa em que precisaremos do Redux
está aqui nos filtros, quando definimos um filtro e, em seguida, salvamos isso, é claro
que isso deve ter um efeito nas refeições que estamos carregando aqui na guia refeições na lista de refeições quando selecionamos
uma categoria. Aí
deve refletir-se o que colocamos nos filtros. Então é nisso que trabalhamos, para o que precisaremos do Redux e
para isso, vamos instalar o Redux e começar a usá-lo.
Para começar com o Redux, vou encerrar meu servidor expo
aqui, o processo de inicialização do npm, vou encerrá-lo temporariamente e instalar
um pacote, que seria o
Redux e, além do Redux, também precisamos instalar o React Redux, porque também é necessário trabalhar com
o Redux.
Portanto, os dois pacotes precisam ser instalados aqui e, enquanto estão sendo instalados, já podemos começar
a trabalhar um pouco nos nossos arquivos de código, porque neste projeto, quero adicionar uma nova pasta agora e
é a pasta store.
Agora você pode nomear essa pasta como desejar, não precisa ser nomeada como store, o Redux não
se importa, mas é a pasta na qual quero gerenciar minha configuração do Redux, porque o Redux é tudo sobre esse
repositório central de estados.
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
um curso completo
sobre React e Redux para isso, se você quiser saber os detalhes disso, por Neste
curso, assumo o conhecimento prévio sobre React e Redux e, portanto, isso será apenas uma breve atualização.
No final, o redux diz respeito a redutores, ações e, em seguida, à construção de uma loja com base nesses
redutores e ações.
Agora, aqui na pasta da loja, adicionarei uma pasta de ações e uma pasta de redutores, na verdade, teremos apenas uma
ação e um arquivo redutor neste projeto, mas se você tiver mais arquivos do que isso, terá subpastas
separadas podem ser uma boa idéia para mantê-la organizada e é por isso que
as crio aqui, mesmo que para esse aplicativo simples, não precisaríamos disso porque não teremos muitos arquivos.
Vamos começar com o redutor. Na pasta
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
de refeições.
Portanto, esse é o arquivo onde escreveremos a lógica para marcar uma refeição como
favorita e para gerenciar nossos filtros.
Agora, um redutor no React é apenas uma função. Então,
aqui vou criar uma função, nomeie-o como redutor de refeições, o nome depende totalmente de você e essa função
receberá dois argumentos - o estado, o instantâneo do estado atual no qual você pode criar ativar e derivar um novo
estado, porque um redutor no final terá que retornar um novo estado que é tomado
pelo Redux e armazenado em sua loja.
Então você obtém o atual, o antigo estado aqui e a ação porque a função redutora aqui
é executada pelo Redux
sempre que uma nova ação é despachada e, portanto, temos acesso à ação aqui para
que possamos descobrir se precisamos agir e o que precisamos fazer.
Portanto, dentro dessa função, no final, você precisa retornar um novo estado, em sua forma mais
simples, é claro que significa que retornamos o estado atual, o que, por outro lado, significa
que esse redutor não faz nada útil, mas vamos mude isso.
Agora, quando executamos nosso aplicativo pela primeira vez, também queremos configurar um estado inicial que é
usado inicialmente, para que inicialize
nosso estado quando o aplicativo for iniciado e, para isso, adicionarei uma nova constante de estado inicial aqui que
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
precisaremos de ambas - uma lista de todas as refeições e uma lista das refeições que se encaixam nos filtros
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,
é
claro, essa é apenas uma abordagem possível que você
pode adotar aqui. Certamente, podemos encontrar outras maneiras de gerenciar nossos dados aqui, mas eu gosto dessa.
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
e daí dos dados fictícios. arquivo js e inicializarei as refeições aqui com minha matriz de dados fictícios de refeições.
As refeições filtradas também são inicializadas com isso, porque, inicialmente, quando o aplicativo é
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
aplicativo é iniciado, não temos refeições favoritas.
É claro que em um aplicativo real, convém armazenar esse estado em um servidor, para que, quando
o usuário feche o aplicativo e volte mais tarde, você
não comece do zero novamente, mas
isso não é algo que faremos aqui, você aprenderemos como chegar a um servidor, salvar dados e carregá-los
em módulos
separados posteriormente neste curso. Aqui, manteremos isso simples ao focar no Redux.
Portanto, este é o meu estado inicial, aqui nesta função agora podemos usar uma sintaxe Javascript onde
atribuímos nosso estado inicial como um valor padrão para o argumento state, o que significa que
quando essa função redutora é executada e o estado é indefinido, é o caso quando O Redux executa nosso
redutor pela primeira vez. Começaremos
com esse estado inicial, de modo que
carregaremos automaticamente nosso estado inicial, por assim dizer, porque quando o Redux for iniciado e iniciado, haverá uma ação
inicial despachada. costumava percorrer o redutor uma vez e isso carregaria nosso estado inicial.
Assim, com isso, podemos trabalhar com algum estado inicial que seja bom, mas que por si só não nos
ajude muito. No momento, é
isso, agora
vamos conectar esse redutor ao Redux, para que possamos realmente usar nossa loja Redux em qualquer lugar do aplicativo antes
de começarmos a enviar ações e fazer coisas mais úteis no redutor. Portanto, por enquanto, exportarei o redutor
de refeições como padrão aqui e agora no aplicativo. js, que é o arquivo em que todo
o aplicativo é iniciado,
precisamos configurar nossa loja Redux. Para
isso aqui, importamos create store do Redux.
Além disso, precisaremos importar redutores combinados de lá.
Isso nos permite criar uma loja agora, precisaremos apenas do nosso redutor,
então aqui vou importar meu redutor de refeições e agora aponte para a pasta da loja, a pasta dos redutores
e as refeições. arquivo js
e agora talvez aqui, podemos criar nossa loja aqui chamando create store. Agora, create store recebe um redutor no final, que
você precisa passar. Agora, é claro, aqui temos um redutor
e poderíamos repassá-lo, mas em aplicativos maiores, você pode ter mais de um redutor porque
geralmente possui redutores para as diferentes áreas de recursos do seu aplicativo, um para autenticação e outro para seus produtos, um
para, digamos, a área de suporte do seu aplicativo e você precisa mesclar todos esses redutores únicos, esses diferentes
redutores em um redutor de raiz e é isso que a função de
redutores combinados faz; novamente, aqui não precisaríamos, porque só temos um redutor mas, para
já mostrar a abordagem que você
pode usar com vários redutores, eu a usarei aqui também. Então, terei meu redutor de raiz aqui, que crio
chamando redutores combinados, redutores combinados pega um objeto Javascript onde agora mapeamos nossos redutores únicos, nossos diferentes
redutores para chaves.
Por exemplo, aqui, poderíamos tomar as refeições como uma chave, mas esse nome depende totalmente de você e
conectá-lo ao redutor de refeições, assim.
O que isso faz é que, no final, mescla esse redutor de refeições nesse redutor de raiz e, mais tarde,
poderemos trabalhar com o estado gerenciado pelo redutor de refeições, portanto,
com esse estado que é inicializado assim, com a ajuda dessas refeições propriedade, poderemos acessar
esse estado, essa
parte do estado com essa propriedade posteriormente, mas você verá tudo isso.
Então esse é o nosso redutor de raiz e agora precisamos passar pelo redutor de raiz para
criar uma loja, isso nos dá uma loja e agora?
Agora, essa loja precisa ser fornecida ao nosso aplicativo e, para isso, precisamos
do outro pacote que instalamos, o React Redux.
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
final, portanto, em torno do componente superior, que contém todos os outros componentes que eventualmente irão interagir
com nossa loja e o navegador de refeições é muito bom para
isso, porque contém todas as nossas telas, portanto, contém todas as componentes que eventualmente precisaremos para
despachar ações ou acessar nosso estado, portanto leia-o. Portanto, aqui envolvemos o componente do provedor em torno do navegador de
refeições e agora o provedor leva uma propriedade importante, um suporte que você precisa passar e esse é o suporte da
loja e, claro, lá, como um valor que passamos por nossa loja aqui.
Portanto, essa loja constante que mantém a loja criada é passada para o fornecedor da loja e nos bastidores, isso
nos dá tudo o que precisamos para interagir agora com o Redux, com a loja Redux em qualquer
componente, tela ou outro componente em nosso aplicativo .
Agora, deixe-me reiniciar isso com o npm start e, por enquanto, isso não fará
muita diferença, mas nosso aplicativo certamente ainda
funcionará, por isso não deve travar por causa disso, então vamos verificar se esse é o caso e vamos recarregue aqui,
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
iOS e estou bastante confiante de que também carregará bem no Android, Sim, isso também está funcionando.
Então agora o Redux está
configurado, nossa loja é inicializada, mas não a estamos usando.
Portanto, como próximo passo, vamos ter certeza de usar nossa loja antes de tomarmos cuidado com as ações e
realizarmos um trabalho real no redutor.