Como podemos usar nossa loja?
Lembre-se de que, no final das contas, estou gerenciando minhas refeições, não minhas categorias, porque não temos nenhuma ação
planejada que altere tudo, mas estou
gerenciando minhas refeições aqui.
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
e, em vez disso, retirar os dados de nossa loja, porque a
diferença será que mais tarde podemos adicionar lógica à mudança os dados em nossa loja, enquanto nossos dados
fictícios nunca serão alterados.
Portanto, devemos importar dados de nossa loja, para depois adicionarmos lógica para manipular esses
dados, por exemplo, para restringir as refeições que estamos exibindo.
Então, onde precisamos das refeições? Na tela de
categorias, não estamos importando refeições. Temos algumas outras importações das quais podemos nos livrar, mas isso é
apenas
uma observação, não estamos importando refeições.
As categorias podem permanecer lá porque, novamente, não teremos nenhuma lógica que
mude isso, para que possamos seguir em frente. A tela de categorias de refeições é uma história diferente, lá estamos importando
refeições e agora o objetivo é livrar-se dessa importação e tirar as refeições da loja
Redux, e a questão é: como fazemos isso? Novamente, o pacote React Redux nos ajuda com isso. A partir desse pacote
React Redux, podemos importar algo, podemos importar um gancho, o gancho seletor de uso.
Isso nos permite selecionar uma fatia do nosso estado, do nosso estado gerenciado globalmente e usá-lo neste componente.
Agora, estou usando o gancho aqui, porque isso nos permite usar isso em um componente funcional.
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
e usa o estado do mapa para props, envio de mapa para adereços, isso é algo que
você pode usar também, absolutamente
funcionará, mas isso é um pouco mais simples, então
eu vou usar o seletor de uso aqui. Com isso adicionado, agora, quando
usamos nossas refeições, não as usamos dessa maneira;
agora podemos obtê-las com a ajuda do seletor de uso. Portanto, para derivar nossas refeições de exibição, o que
farei aqui é criar uma nova constante, refeições disponíveis, talvez, o nome é com você e usar o seletor aqui assim, porque
isso me recuperará dados do estado e retornará então é isso que
eu vou armazenar aqui nesta constante, o seletor de valor e uso retornado assume uma
função, uma função que será executada para nós pelo React Redux.
Uma função que obtém o estado como argumento automaticamente, React Redux, que executa a função para nós,
fornecerá o estado atual, o estado Redux atual para essa função e, em seguida, poderá retornar quaisquer dados que desejemos
desse estado, daquele global global, e eu estou usando esses termos
de forma intercambiável aqui.
Então, como podemos recuperar dados desse estado aqui no corpo da função
e estou usando a notação de seta de atalho aqui, no lado direito da seta, que é
retornada automaticamente se não estiver envolto em chaves. Bom, para ter acesso a algo do estado,
temos que voltar ao local onde criamos a loja, lá passo um redutor de raiz criado
combinando todos os redutores.
Novamente, temos apenas um, mas expliquei por que fiz isso.
Agora, aqui temos essa chave, refeições que dependem totalmente de você, você
pode nomear isso como quiser.
Isso confere a esse segmento do nosso estado, que é gerenciado por esse redutor, um
identificador, e agora podemos usá-lo para se apossar
da parte do nosso estado pela qual esse redutor é responsável.
Então, no final, um estado que se parecerá com esse, como esse estado inicial. Então, na tela de refeição da categoria,
aqui eu acesso o estado. refeições ou o que você escolher como
identificador em redutores combinados e, aqui, acessarei refeições filtradas. Não são as refeições que eu também teria
lá, também temos as refeições aqui, mas eu quero respeitar os filtros definidos.
No momento, não temos lógica para defini-los, mas
com isso mudaremos no futuro, então aqui quero receber minhas refeições filtradas, para sempre ter as
que realmente devo poder exibir, as que respeitam os filtros configurados pelo usuário
e agora são as refeições disponíveis que desejo filtrar ainda mais aqui para encontrar a refeição para o ID da
categoria que selecionei ou as refeições para a categoria que selecionei. Com isso, não há mais refeições em maiúsculas
neste arquivo, apenas minúsculas aqui e nos livramos dessa importação com
sucesso, agora vamos seguir em frente. Na tela favorita, também estamos importando refeições
e,
como antes, devemos nos livrar disso, então vamos fazer isso. Em vez disso, também como antes, usarei o seletor de uso
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
seletor de uso.
Novamente, isso me dá um estado e eu posso acessar o estado. refeições. refeições filtradas, mas agora, na
verdade, aqui
para os favoritos, não quero respeitar nenhum filtro definido porque, na minha opinião, faz
sentido que, quando queremos ver nossos favoritos, sempre vejamos todos os favoritos.
É claro que você poderia ter uma lógica diferente e optar pelas refeições filtradas, mas vou usar apenas as
refeições aqui, então. refeições. as refeições
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
do estado, mas
é claro que se você der uma olhada no seu redutor, isso só faz parte do
sentido certo porque temos uma propriedade de refeições favorita aqui e, de fato, temos.
Então, na verdade, não precisamos mais filtrar nossos favoritos assim e isso era apenas um filtro fictício de qualquer
maneira, sempre levava as refeições com m1 e m2 como um ID. Em vez disso, para nossas
refeições favoritas, podemos obtê-las acessando aqui, em nossas refeições, defina as refeições favoritas, portanto, essa
propriedade, porque mais tarde gerenciaremos as refeições favoritas em uma matriz separada em nossa loja, para que seja
ainda mais fácil
aqui, com um código muito curto. Então, com isso, nos livramos da importação de refeições aqui
também, vamos para a tela de filtros.
Não há importação de refeições aqui,
a tela de detalhes da refeição, por outro lado, possui uma.
Então, aqui eu quero
me livrar dele e agora
aqui precisaremos da propriedade de outras refeições que mostrei um segundo atrás, porque novamente aqui, podemos usar o seletor
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
carregar uma única refeição por ID e, portanto, minha base, minha matriz na qual procuro essa ID deve, obviamente, ser uma matriz
com todas as refeições e não filtrada porque não me importo com nenhum conjunto
de filtros, aqui estou procurando uma refeição específica com um ID específico e quero obter uma
lista completa de refeições e é por isso que precisaremos disso sem filtro lista de refeições que estamos
gerenciando aqui.
Portanto, aqui, agora podemos obter nossas refeições disponíveis com o seletor de uso e, novamente,
usamos as refeições do estado. refeições agora de verdade e agora podemos usar as
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
botões agora que a vejo, mas na verdade teremos um problema.
Você pode perceber que, no cabeçalho, eu também tento encontrar uma refeição da matriz de refeições
e removemos essa importação.
Agora, o problema também está aqui nas opções de navegação, não podemos usar o gancho seletor de uso, porque
você só pode usar ganchos dentro de outros ganchos ou dentro de componentes funcionais e isso não é
nada disso, é uma função normal, não funcional componente e também não um gancho.
Portanto, não podemos usar o seletor de uso aqui para que não funcione.
Agora é claro que poderíamos trazer de volta a importação de refeições, mas isso seria um pouco barato, porque em
aplicativos reais, você às vezes terá aquela situação em que precisa de dados da sua loja Redux nos dados
de
navegação e, portanto, na próxima palestra, resolver isso e garantir que também possamos ter acesso a isso aqui.