Um momento
Aula 10
Cursos / O Conceito de Seletor (Selector) - React & Redux
Composição de Seletores (Aula React & Redux)

Summary

# Aula sobre Composição de Seletores com React e Redux

## Introdução
Na aula de hoje, vamos aprender sobre a composição de seletores em React e Redux. Já temos dois seletores:
1. **bandasSelector**: Seleciona um vetor de objetos com informações sobre bandas.
2. **bandasFavoritasSelector**: Retorna um vetor com objetos das bandas que o perfil gosta.

## Objetivos
Observamos que ambos os seletores compartilham código similar, uma vez que ambos acessam listas em sub-estados diferentes (bandas e bandas favoritas). Para simplificar, podemos criar seletores que acessam esses dados de maneira mais eficiente.

## Composição de Seletores
A composição de seletores refere-se ao uso de um seletor dentro de outro seletor. Isso permite modularizar o código e reutilizar seletores, facilitando manutenções e alterações na estrutura de dados.

### Exemplo Prático
1. **Criar o Seletor `bandasHashSelector`**:
   - Este seletor acessa o estado `state.bandas.bandas`.
   - Exemplo de implementação:
     ```javascript
     const bandasHashSelector = (state) => state.bandas.bandas;
     ```

2. **Utilizar `bandasHashSelector` em outros seletores**:
   - Modificamos **bandasSelector** e **bandasFavoritasSelector** para usar `bandasHashSelector`.
   - Isso permite que, se a estrutura do estado mudar, apenas o `bandasHashSelector` precisa ser atualizado.

### Vantagens
- **Manutenção Simplificada**: Ao isolar a lógica de seleção em um seletor específico, apenas ele precisa ser alterado se a estrutura do estado mudar.
- **Reutilização de Código**: A mesma lógica pode ser utilizada em diferentes seletores, evitando a repetição de código.

## Conclusão
Nesta aula, aprendemos a importância da composição de seletores em React e Redux. Criamos seletores que reutilizam outros seletores, facilitando a manutenção e a legibilidade do código. Até a próxima aula!

Video Transcript

Estamos de volta com mais uma aula sobre seletores com React e Redux. Então, vamos aprender a fazer a composição de seletores nessa aula. Então, até agora nós temos dois seletores, banda selector, que vai selecionar e nos retornar um vetor de objetos. Cada objeto representa uma informação sobre uma banda. Temos também o banda favorito de seletor, que nos retorna um vetor com os objetos das bandas que o perfil gosta. Agora, você note entre os dois seletores que a maioria do código é a mesma, e o vetor é o que seleciona na lista do sub-stado bandas. E o segundo seleciona na lista bandas favoritas, o vetor bandas favoritas, que está dentro do sub-stado perfil. Então, a maneira de a gente melhorar isso, a gente pode criar seletores para poder selecionar o bandas hash. Seleções, eu poder selecionar essa lista de todas as bandas, dos ideias da todas as bandas em uma específica ordem, e também para selecionar os ideias das bandas favoritas. Então, a gente pode criar três seletores aqui. A gente vai fazer a composição de seletores. Significa o quê? A composição de seletores é quando você tem um seletor, e esse seletor usa outro seletor. Então, dentro do seletor, você vai se referir a outro seletor para poder selecionar uma parte do estado. Então, a composição. Vamos lá para ilustrar como exemplo. A primeira coisa que a gente vê é que o bandas hash é o mesmo. Então, para poder acessar o bandas hash, a gente vai pelo caminho state.bandas.bandas. Então, esse cara aqui seria o 1. A gente poderia criar um seletor para selecionar esse caminho. Então, vamos lá em cima. A gente pode dizer, vamos criar uma variável, e eu vou chamar bandas hash seletor. Essa variável vai ser a mesma padrão de função de seletor, que é como o primeiro parâmetro do estado. E é uma função que vai retornar o state em um caminho. Nesse caso, vai ser ponto bandas.bandas. Mesma coisa aqui. Então, quando você chama esse seletor, com o estado, ele vai retornar ponto bandas.bandas, que vai selecionar o quê? De volta ao arquivo ridos do .js, para confirmar. Vai selecionar state.bandas.bandas, vai selecionar esse cara aqui. Um objeto cujas chaves são o ID de cada band. Então, com esse seletor definido aqui, bandas hash seletor, nós podemos reutilizá-lo aqui e aqui. Então, em vez de falar state.bandas.bandas aqui no bandas seletor, nós vamos falar o quê? Bandas hash seletor e passa o state. Ele vai pegar esse state, vai passar como argumento para bandas seletor, e o bandas seletor vai retornar aquilo que a gente tinha antes. Quero ver você fazer para o outro aqui. Vamos lá, é só dizer bandas hash seletor, passa o state. Vamos salvar e testar. Parece que não houve problemas. Tudo ok. A gente acabou de fazer uma composição de seletores. Temos um seletor dentro de outro seletor. Isso é a composição de seletores. E quando a gente fizer dessa maneira, se lembra que eu tinha mudado o caminho das bandas? Por exemplo, se eu tivesse mudado esse cara aqui no reducer.jotess, no nosso caso aqui, se eu tivesse mudado por exemplo, grupos musicais seria o uso. Não, nesse caso não vai dar certo porque o lixo está dependendo nele. Mas se eu tivesse mudado, por exemplo, grupos musicais nessa pra ser esse objeto aqui, o que que iria falar? Iria falar que ele não sabia o que é o bandas hash, iria falar, né? Porque ele iria se referir ao ponto bandas, ponto bandas que não existe mais. Então eu teria que mudar grupos musicais aqui pra poder ajeitar e tá tudo certo agora. Note que agora fazendo isso, eu só tive que mudar o bandas hash select seletor pra poder corrigir o problema. Eu não tive que mudar o bandas seletor, eu não tive que mudar o bandas favoritos seletor. Então dessa maneira a gente isolou o bandas hash selector e o caminho pode ser qualquer caminho que vai funcionar porque sempre ele se refere ao bandas hash selector que é único, não é o caminho escrito em cada selector. Então tá, essa é a vantagem da, uma das vantagens de fazer isso, né? Como a gente já tinha aprendido antes. Tá? Então vamos voltar ao reducers e reverter, mudar de volta esse cara pra bandas. Certo? Reverte o bandas hash pra bandas. Pronto? Legal, então vamos revisar, a gente aprendeu a fazer a composição de seletores. Significa o quê? Que você tem a definição de seletor que usa outro seletor dentro da sua implementação. Só isso, seletor dentro de um seletor. Se tem uma vantagem a gente pode reutilizar aquele seletor em vários cantos e se mudar o caminho, por exemplo, é só mudar lá no seletor que todos os caminhos irão mudar em cada seletor que usa aquele seletor dentro de si próprio, tá? Então por assalas só e até a próxima.
Nenhum comentário ainda (loading...)
Nenhum comentário ainda (loading...)
Gostou da aula? 😆👍
Apoie nosso trabalho com uma doação: