Resumo da Aula sobre Selectores em React e Redux

Então pessoal, estamos de volta, mais uma aula sobre conceito de selectures com React e Redux. Vamos continuar o que a gente estava fazendo, temos aqui nosso aplicativo, estou rodando aqui no localhost 3000. Então temos a lista de bandas, que tem todas as bandas disponíveis. Temos o nosso perfil, que agora está mostrando todas as bandas, mas isso não está correto, porque se você olhar no nosso estado inicial do arquivo Reduces.js dentro do propriedade perfil, tem um objeto que tem outra propriedade chamada bandas favoritas. Essa é a lista de ideias das bandas favoritas. Nesse caso só tem uma que é a banda cujo ideia é um, dois, três. Um, dois, três seria Iron Maiden. Então a gente tem que ajeitar esse cara. Anteriormente a gente aprendeu a reutilizar o selector de bandas, e a gente usou no lista de bandas, aqui embaixo no map state props, quando dá o connect. A gente reutilizou o bandas selector no componente lista de bandas e no componente perfil, só para demonstrar que quando você tiver o estado do aplicativo mudar o caminho de onde os dados estão, você só precisa mudar o selector, em vez de ter que mudar todos os componentes que se referem àquele caminho, para aqueles dados. Então aqui vai ser um selector diferente para o perfil, para as bandas favoritas, porque o bandas selector se refere a a lista de todos os bandas, todos os objetos das bandas, em ordem definida pelo estado inicial, pelo reducer, propriedade lista, dentro do sub reducer bandas. Agora a gente vai fazer quase a mesma coisa, exceto que a nossa lista não vai ser essa lista geral, vai ser a nossa lista de bandas favoritas. Então para isso vamos aqui no perfil, para o JS, no final do arquivo perfil, onde você vai retornar propriedade de bandas favoritas, que vão ser injetadas no componente perfil, não vai ser mais o bandas selector, vai ser um selector que a gente vai criar, um novo selector, vamos chamar bandas favoritas selector. Então vamos criar esse selector bandas favoritas selector, essa função vai pegar o estado e vai retornar o objeto, ou objetos, uma lista de objetos com as nossas bandas favoritas, nesse caso, vai mapear um, dois, três para o objeto correspondente, um, dois, três, que é o Iron Maiden. Se tivesse mais de um, por exemplo, se tivesse também um, dois, dois, o próximo objeto seria esse aqui na lista. Tá bom? Então vamos lá, como desafio, eu quero que você pause o vídeo e faça o bandas favoritas selector, no arquivo selector, esse ponto JS, cria um novo selector aqui, bandas favoritas selector. Vai ser quase a mesma coisa do outro, é certo que você vai mudar a lista de ideias, vai ser uma lista diferente, vai ser a bandas favoritas, que está dentro do substado perfil. E aí, dá tudo certo? Vamos lá. Então vou criar uma variável chamada bandas favoritas selector, essa variável vai armazenar uma função, o parâmetro da função é o state, e antes de mais nada, vou mudar o export aqui para a gente poder disponibilizar esse selector em outros arquivos para ser importado. Então primeiro a gente vai precisar do quê? A gente tem a lista, né? Então a gente vai ver que está essa lista de bandas favoritas, está no state.que? ponto perfil, ponto bandas favoritas. Esse é o caminho para acessar os ideias das bandas favoritas, nossos bandas favoritas, vamos verificar no videoses.js, se realmente é o caso, estado.perfil.bandas favoritas, certo? Então a gente vai pegar os ideias, quando a gente se refere a esse caminho, é uma lista, um array vetor de ideias. Agora a gente precisa mapiar cada ideia para o objeto correspondente a esse ideia. Nesse caso a gente vai precisar acessar que propriedade do estado? A propriedade state.bandas.bandas. Aqui vai acessar esse objeto aqui. E a gente vai usar o ideia para poder acessar, por exemplo, nesse caso, um ideia 1, 2, 3, e chave para poder acessar esse objeto que a gente vai mapiar e injetar no componente perfil. Vamos lá? Então voltando aos seleitores post.js. Então a gente vai pegar esses bandas favoritos, mapiar cada ideia, né? Então vamos retornar o mapeamento e vai converter cada ideia na lista, vai fazer uma nova lista, os ideias vão se tornar objetos. A gente vai fazer o quê? Retornar, a gente vai precisar acessar aquele hash, que a gente chamou de bandas hash, por exemplo, a gente ainda não definiu nessa função, vai definir já já. A gente vai usar a chave o id da banda. E isso vai pegar e retornar o objeto da banda. Agora, para definir bandas hash, onde é que está esse cara? Vamos definir uma variável chamada bandas hash, vamos definir esse cara. Então está onde? Está no state.bandas.bandas, é a mesma coisa do outro aqui. Vamos ser notos que a gente já tem uma repetição, né? E a gente vai aprender já já, próxima aula, como a gente pode reutilizar esse código e fazer a chamada composição de seleitores. Então vamos salvar isso, vamos testar esse seleitor, voltando ao perfil.js. Estamos aqui no map.state.props, já escrevemos bandas favoritas de seleitor, mas não importamos. Vamos lá para o início do arquivo perfil.js e vamos dar o import. Não vai ser mais bandas seleitores, vai ser bandas favoritas seleitores, que a gente acabou de escrever. E from.barseleitores, o arquivo correto. Vamos salvar. Então só apareceu agora a IronMade, a gente já tinha definido a lógica de renderização da lista, usando a propriedade bandas favoritas, a gente só precisou mudar aqui embaixo a mudar o seleitor, que a propriedade já estava injetada, com o mesmo nome, bandas favoritas e a lógica já estava lá. Então a IronMade está aqui, tudo certo, tudo legal. Antes de a gente terminar essa aula, vamos revisar o que a gente fez. Então a gente conceptou a página do perfil para mostrar somente as nossas bandas favoritas. A gente criou um novo seleitor chamado bandas favoritas seleitores e a gente usou para adiantar propriedades bandas favoritas no componente perfil que a gente já tinha escrito, a lógica para renderizar essa lista. Então bandas favoritas seleitores, se a gente for no arquivo seleitores de js, é bem parecido com o bandas seleitores, usamos o mesmo hash para poder acessar aquele hash de objetos de bandas indexados pelo ID da banda, exceto que agora ele retorna o mapeamento dos IDs das bandas favoritas para cada objeto lá. Então a diferença somente é que a gente usou outra lista de IDs, a lista geral de todas as bandas, versus, no bandas favoritas seleitores, uma lista de IDs, somente os IDs das bandas que a gente gosta. A única diferença está aqui. Então por essa aula é só e até a próxima.