Aula sobre Reselect

Olá a todos nesta aula vamos instalar o reselect e criar nosso primeiro selector usando reselect vamos lá primeiro vamos instalar o reselect usando o terminal aqui estou no diretor do projeto chamado bandas o da npm install re sl e e tá reselect final pouquinho pronto instalou o select versão 4 olha aqui no package ponto de json versão 4 já nesse vídeo vamos estamos usando versão 4 pronto instalamos o reselect agora vamos lá no nosso selector vamos fazer o seguinte do banda selector por exemplo nós vamos recriar o banda selector usando o reselect como a gente vai fazer isso fazer o seguinte então antes de partir para isso no reselect a função mais base que a gente vai aprender é a função create selector tá essa função funcionar a seguinte maneira esse cara vai criar um selector memoizado tá selector selector memoizado acho que esse é o termo em português se você tiver um que tem agora isso vale bom a create selector tá esse cara eu vai vir do criat selector selector tá eu vou escrever aqui então o a função é que a selector não esqueça das chaves do pacote reselect você vai chamar assim agora os argumentos então os primeiros argumentos tá vão ser selectores tá você tem que passar selectores e o último argumento vai ser a uma função que vai usar com argumentos cada valor referenciado pelos selectores tá por exemplo por exemplo voltando aqui no bando selector nós usamos que selectoris dentro do bando selector nós usamos o bandas a selector e o bandas de selector temos dois selectores que a gente usa dentro de selector então nós diríamos primeiro tá põe o primeiro selector que você está usando bandas acho selector depois qual o segundo selector põe a vígula vai ser o bandas lista selector tá pronto terminamos a lista de selectores que serão utilizados dentro desse selector tá composição de selector então esse é o selector para a banda selector vamos botar aqui a consta bando selector esse cara agora o terceiro argumento argumento vai ser uma função é eu abri a função aqui os argumentos para a função serão os valores bandas hash e banda lista respectivamente tá bandas hash e o bandas liste então os selectores que forem listados antes da função serão usados como argumento tá o valores que se referem a cada selector serão usados como argumento em sequência nessa última função aqui então você vai poder usar o bandas hash e o id nesse caso que eu falei usando essas duas variáveis aqui bandas hash e bandas liste tá e com isso é só você fazer operação que quiser nesse caso a gente está mapeando os id liste de id para lista de objetos então você pode dizer return bandas lista ponto meta tá o id da banda banda id e você vai retornar o que é a torna bandas hash usando banda id tá vamos comparar aqui na do lado e um com o outro do lado esquerdo temos o selector original sem usar o reselect lá direto temos o selector usando reselect tá então você se tiver normalmente você usa isso quando já tiver composição de setores se você não tiver se você já tiver selector só usando o caminho por exemplo banda banda lista selector que tiver state quando banda lista não é ok não precisa nem usar a crade selector é só que definir dessa maneira aqui mas se você tiver um selector que utiliza outros setores é a composição você pode criar usando crade selector passa a lista de setores que serão utilizados e no final passa uma função essa função corresponde a os valores correspondentes para selector listado em ordem bandas é selector vai te dar o bandas hash que vai aparecer na variável bandas hash bandas lista selector vai te dar aquela lista de id que aparecer na variável bandas listo e aqui no corpo você faz a mesma operação que a gente fez anteriormente aqui tá e essa lista pode ser não me possa 2 3 4 pode ser 1 2 3 4 sim por diante mas sempre no final essa é a função tá só como nota vale a pena também dizer que também tem outra maneira de definir esses setores eu acho que você pode usar uma lista o vetou em vez de botar separados por viva você olhar lá a documentação do select ele te diz que você pode fazer isso tá a nota que ele fez a maneira que ele fez a não sei se ele tem aqui dizendo que também for usar uma vetou e aí e aí e aí e aí e aí e aí e aí aqui ó nessa parte que ele diz do criado selector ele diz que você pode passar sim tá ou você pode passar uma vetou tá de selectores tá diferença essa primeira é só um argumento que é uma lista de vetores nessa outra o outro que a gente fez é vários argumentos passados pro criado select não é só um dentro de um vetou tá você preferir eu faço dessa maneira aqui tá certo faltando aqui vamos utilizar testar esse cara eu vou comentar o selector banda selector anteriormente anterior vou pegar esse cara aqui copiar e eu vou recortar pra cá e vou pegar esse import porque a gente precisa importar lá em cima lá pra cima do arquivo import e select do reselect não esqueça da chave voltando aqui eu vou copiar esse console log eu quero manter dentro do corpo do selector aqui tá aqui e salvar não se esqueça de dar o export consta pronto e corta e seguir e salvar vamos ver o que deu lado esquerdo aqui e aí e então resolver aqui é iniciar o aplicativo a lista de bandos ainda está lá corretamente e o perfil a gente nem pediu o perfil mas lista tá ok que acontece quando a gente clica clica aqui e aí e aí então ele deu um clique chamou o mapa state props mas não chamou banda selector olha aqui não chamou esse console log clica aqui deu um clique map state eu clique map mas não chamou banda selector porque porque ele tá meio moizado isto é ele já fez computação na primeira vez com o que a entrada primeiro tem duas entradas aqui duas bandas hash e bandas liste note que aquela mudança dos estados do redux que a gente fez emitindo aquela ação se lembra modificar estado que adicionou a sua nova propriedade não modificou quem não modificou os dados que são referidos pelo bandas hash bandas liste que são quem bandas hash esse cara aqui não modificou esse não mudou e o bandas liste não mudou também né então nenhum desse cara mudaram por causa disso né a entrada não mudou a computação foi feita uma vez anteriormente o geselect armazenou o resultado daquela computação que nesse caso é o mapeamento desses três objetos dentro de um e ele só fez uma vez na próxima vez né ele não executa a computação nesse caso quando eu falo computação eu falo a execução desse corpo aqui dessa função ele não chamou console log tá e isso foi memoizado se você imaginar que esse banda selector você generalizar isso e você vai no selector que faz muita computação não precisa ser essa maneira que pode ser um cálculo massívulo muito pesado ele só vai fazer uma vez para a mesma entrada e saída né então ele não vai chamar o corpo aqui para calcular de novo por causa da memoização tá muito importante isso e essa motivação uma das motivações para usar o reselect então aprendemos nessa aula fazer revisão aqui aprendemos a criar o um selector usando o reselect qual é a função create selector que vem do pacote reselect dá o import com as chaves aí passa a lista de selectores como argumento separado por vírgula e seguindo no final o último argumento é uma função que tem o número de parâmetros correspondente ao número de selectores listados anteriormente e cada um desses caras os dados que forem referidos para o selector aparecerão como variáveis do parâmetro da função você pode usar para poder retornar o valor que você quiser desse selector esse selector é memoizado um criado select significa que se você tiver a mesma entrada né esse cara bandos reaixo bandos lista foi o mesmo depois da primeira vez que esse selector foi executado ele não vai executar o corpo do setor novamente ele vai usar o valor que foi computado anteriormente para mesma entrada é memoizado tá então normalmente o criado select usado quando você tem a composição de selectores se você tem um selector bem simples bem simples que você só faz pegar por exemplo bandas reaixo só pega a state bandas bandas esse é um selector simples que você não precisa usar o criado selector que é só retornar a state bandas bandas não precisa de criado selector selector quando você vai fazer um selector que usa a composição para que usa o selector certo e voltando aqui só no documentação quando você olhar o reselect tá ele usa as funções definições de funções de maneira curta tá em retorno eplista olha que ele define os selectores assim mas é a coisa que eu fiz aqui eu fiz maneira explícita com retorno explícita tá pra poder clarificar o que é os caras mas eles aqui na documentação ele usa dessa maneira aqui tá o retorno implícita mesma coisa tá certo Então, por essa aula é só, espero que tenham gostado, você pode usar o re-selectar para fazer os seus seletores memoizados para não ter que fazer computação dos valores novamente, toda vez que o maps.tiprops for chamado. Então, deixe-o como exercício, você pode fazer o, você pode tornar o bando o favorito seletor, um seletor memoizado usando o re-select, tá? Então, por essa aula é só e até a próxima.