Resumo da Aula sobre Seletores

Fala pessoal, estamos de volta. Vamos continuarmos aprendizado do conceito de seletor. A gente normalizou o estado do aplicativo para poder... Eu ilustrar os pontos aqui dos seletores. Temos a lista de bandos aqui. Vamos continuar com aquele negócio do perfil. Então, vou no componente perfil aqui. Por exemplo, a gente pode botar o nome da pessoa, né? E vai vir de props, né? Vamos botar desse, props.nome, por exemplo. Como é que a gente vai pegar esse nome? Tem que conectar esse componente ao Redox. Como é que conecta, se lembra? Você vai chamar o connect. Primeiro, clique para passar o mapState, o props, essa função. E a gente vai definir aqui um argumento state e tem que retornar o objeto às propriedades que a gente quer indivitar. E você chama essa resultado aqui função, essa função com o componente perfil como argumento, tá? Agora, tem que portar porque a gente está usando connect, como lá em port, connect from... Da onde? Tá? Agora, o que a gente precisa do nome? Agora, onde é que está o nome? Nome, vai aparecer como prop, da onde é que vem esse cara? Se lembra? Vê lá no reducer, inicial aqui. Está na propriedades chamada perfil.nome. Então, o caminho é state.perfil.nome. Vamos lá, state.perfil.nome. Legal. Você pode fazer o quê? Seletou com esse cara também. Eu deixo como exercício para você fazer. Seletou para o nome da perfil. Então, vai ter também aqui... Vamos supor que você tenha uma lista de... Ah, vamos ver o perfil aqui. Desculpa. Apareceu o meu nome aqui. Tá certo? Então, vamos supor que a gente tenha uma lista de bandas que a pessoa gosta, né? Obviamente, não vai ser todas as bandas que existem. Vai ser só algumas. Mas antes disso, eu quero só ilustrar o ponto de que a gente pode reutilizar os seletores e não vai precisar digitar state.noSeuQue, e.noSeuQue de novo. Por exemplo, vamos pegar só o bandas, e vamos usar o bandas seletores. E usar aqui... Eu vou colocar bandas favoritas. Eu vou injetar essa própria, chamado bandas favoritas, mas vou usar o bandas seletores para poder capturar todas as bandas. Ainda não tem filtragem, tá? Ainda não tem filtro. Aí o que é legal, você pode reutilizar o bandas seletores aqui e é só importar. Não esqueça das chaves. Bandas seletores, front.bar seletores. Por maneira, a gente está usando o bandas seletores nesse outro corpo de perfil. Vai ser injetado aqui. A gente precisa mapear aqui. Vamos fazer uma função aqui. ThisRenderBandasFavoritas para poder... Não ter que de poela, lógico, ali. Bandas favoritas. Vai ser returnThis.probs.bandasfavoritas.map. Tá? Bandas favoritas. Aí vou colocar ali da mesma maneira que a gente fez antes. Que é bandas favoritas.id. Ah, não é div. L-I-A. Bandas favoritas.nome. Agora esqueci da UL. Então deixa eu colocar aqui. UL. UL. Opa. Quebrar a linha aqui. UL. Tá? Vamos ver aqui. Ah, temos essa função aqui. Bandas favoritas. Que retorna um L. Que retorna um L-I para cada banda favorita. Que a gente vai saber como é o próprio. Chamar bandas favoritas. A gente vai mapear aqui. Tá? Então eu que chama aqui a função daqui. Bandas favoritas. Ah, esqueci o que é... Linha 11. Do perfil. Ah, esqueci de retornar. Tá? Aqui é. Return. Se você não quiser return, retorna implícito. É só pôr o parentes aqui. Sem as chaves. Dessa maneira que... Esse é o retorno implícito. Desprocando o value map. Esqueci outro parentes. Tá? Então meu nome apareceu em todas as bandas. Mas você note que o primeiro ponto que eu quero listar, antes de filtrar, é que a gente tem... No perfil.js temos bandas eletor. Selecionando todas as bandas. E temos na lista de bandas.js a mesma coisa do mesmo seletor. Agora. Agora. Agora. Se o caminho dessas bandas no estado mudar. O que é que vai acontecer? Vamos lá no subidústio. Se eu mudar o caminho em vez de ser bandas, grupos musicais. Aqui em vez de ser... Vão lá, sei lá. Ah... Não deixa bandas mesmo. E eu mudei aqui. Se tiver mudar alguma coisa. Obviamente vai dar erro. Mas o erro vai estar onde? No reducer. Não reducer, não. No seletor. É? No bandas seletor. Aí você vai lá no bandas seletor. E muda. Em vez de state.bandas.bandas, tem as grupos musicais.bandas. state.bandgroups.musicais.lista. E ele vai estar tudo correto. Não é que a gente não precisou modificar os componentes, listas de bandas. E o componente perfil. Então essa... uma conveniência de usar os seletores. Você chama a função para a sustente. Ele vai retornar o caminho percorrido e o valor naquele caminho quando chegar no final. Então por isso é bom usar os seletores. Se os caminhos mudarem, não vai ter problema. E mudar o código de cada componente. Porque o que é que vai acontecer? É que a gente precisa ficar com o componente. Porque a gente precisa só mudar o código daquele seletor. Tá? E vou modificar esse cara aqui de volta. Quero também ilustrar que esse cara aqui poderia ter um seletor separado para o hash. Dessa maneira, esse cara aqui não iria quebrar o seletor. Só quem quebrava era o seletor do hash. Então acho que por essa aula é só. E até a próxima. Então até mais. Deixa eu mudar o reducer de volta para bandas.