Aula 10
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: