Summary
Resumo da Aula sobre Seletores com React e Redux
Nesta aula, continuamos a explorar o conceito de seletores em React e Redux, especificamente focando na composição de seletores. Já desenvolvemos o Bandas Rash Selector e agora vamos criar os seletores Bandas Selector e Bandas Favorito Selector, ambos utilizando o Bandas Rash Selector em sua implementação.
Desafio
O desafio da aula é criar seletores que possam selecionar:
- A lista de IDs de todas as bandas.
- A lista de IDs das bandas favoritas.
Implementação
-
Criar Selectores:
-
Uso dos Selectores:
Para utilizar os seletores, basta chamar a função passando o estado:
const bandas = bandasListaSelector(state);
const bandasFavoritasIds = bandasFavoritasIdSelector(state);
Conclusão
Nessa aula, conseguimos criar os seletores bandasListaSelector e bandasFavoritasIdSelector que nos permitem acessar, respectivamente, a lista de IDs de todas as bandas e a lista de IDs das bandas favoritas. Assim, praticamos a composição de seletores.
A aula se encerra aqui, e nos vemos na próxima!
Video Transcript
Estamos de volta, mais uma aula sobre conceito de seletores com o React e Redux.
Nessa aula vamos falar, vamos continuar a nossa composição de seletores, já fizemos o
Bandas Rash Select.
Agora o Bandas Seletor e o Bandas Favorito Seletor, ambos os seletores utilizam o Bandas
Rash Seletor dentro da sua implementação.
Isso é a composição de seletores.
Agora vamos aqui fazer, eu quero te desafiar para você fazer um seletor para selecionar
a lista de idês de todas as bandas e a lista de idês das bandas favoritas.
Quero ver você substituir esses dois aqui por um seletor cada.
Então vamos lá, vamos lá em cima, eu vou dizer, vou chamar a bandas lista de bandas
ou qualquer nome que você quiser, tá?
Seletor, uma função e retorna o caminho state.bandas.lista.
Com isso a gente criou o seletor, a gente vai onde a gente estiver usando aquele caminho
e veio usar o caminho, é só passar bandas lista seletor com o state, tá?
Ele vai pegar e esse cara vai retornar a lista de bandas.
Se quiser você pode esperar esse cara para variar se você não achar que não está
muito claro o que está acontecendo aqui.
Então sem problemas, no lado esquerdo aqui, no navegador, fazemos a mesma coisa para
bandas favoritas.
Criar uma variável, bandas favoritas, seletor.
Opa, a gente já tem esse nome.
Tem que ter um outro nome, bandas.
Id de bandas favoritas, sei lá, bandas favoritas, id, seletor, tá?
State.
É tal no que?
State, perfil, ponto, bandas favoritas.
Com isso a gente vai lá, a gente estiver usando state, perfil, bandas favoritas, só falar
bandas favoritas, id, seletor, passa, chama essa função, costê.
Para você não ficar muito confuso, deixa eu só criar uma variável.
Id, seletor.
E a mesma coisa se você quiser, se você estiver claro para você o que está acontecendo.
Id.
Então só peguei a amazenia lista, fetode id, variável id.
Vamos testar no lado esquerdo, sem problemas.
Legal.
Então criamos nessa aula, bandas listas seletor e bandas favoritas id seletor, para poder
se acessar na id, os id, vetor de id de todas as bandas e vetor de id das bandas favoritas,
respectivamente.
Então essa é a composição de seletores.
Pra essa aula é só e até a próxima.