Resumo da Apresentação sobre reselect

Olá pessoal estamos de volta nós vamos falar aqui vamos entender o problema do map state props de o problema que a gente falou antes do motivo a motivação para poder usar o re-select então antes de instalar o re-select vamos primeiro falar desse primeiro entender o que está acontecendo vamos esperar um pouquinho antes da gente instalar o re-select então a gente falou que anteriormente que o map state props aqui então essa função que pega o state do re-dux e você injeta propriedades para selecionar a parte do estado que você quer aqui seja utilizado no componente agora toda vez que esse state do re-dux mudar o map state props vai ser chamado novamente agora pode ser que o state você se lembra o state do re-dux ele armazena todos os dados do aplicativo não é só essa parte das bandas é tudo mesmo né tudo mesmo então se alguns dados furem relacionados a banda mudar obviamente você quer que esse cara seja executado novamente vai ser sentido agora se você tiver dados que forem não relacionados a essa página aqui de bandas por exemplo então essa página não depende daqueles dados então mas aqueles dados mudarem o estado com total do re-dux vai mudar causa disso vai chamar o map state props novamente agora se você tivesse uma computação intensiva e um desses selectores por exemplo você vai fazer um cálculo que envolve muito processamento então é pesado leva tempo então você faz uma vez tá certo precisa fazer uma vez mas aí se o estado do re-dux mudar né tiver atualização ele vai chamar o app state props de novo caso é disso vai chamar o selector de novo quando chamar o selector de novo o selector vai recalcular tudo aquilo novamente então você tem o problema que você já recebeu mas ele vai resolver o problema novamente então a perca de tempo perca de processamento tempo de processamento a gente não precisa resolver o problema de novo o problema já foi resolvido a gente não precisa recucular então esse é o problema que tem nos selectores e essa motivação para usar o re-select a biblioteca re-select permite a criação de selectores memóisados significa que o re-select vai criar um selector que dá dada uma entrada que já foi já foi recebido anteriormente o re-select vai armazenar a solução da quele problema porque ele espera que a mesma entrada vai dar a mesma saída já então como ele já resolveu que o problema ele vai armazenar a solução do problema e toda vez que o app state props foi chamado novamente aquele selector memoizado vai olhar e veio já fiz essa já resolvi esse problema não precisa recalcular tá aqui a solução ele vai usar o valor da solução que foi anteriormente a gente vê que realmente o app state props tá sendo chamado toda vez que o state do re-select muda a gente vai dar uns com escrever uns console logs aqui pra ver o que está acontecendo por trás de tudo tá vamos aqui começar do lista de bandas no render aqui do lista de bandas antes do return vai dar o console log vou dizer o nome do componente seguido do nome da método jogo da velha nome do método dizer que foi chamado tá nós que vai se chamar uma vez lá do esquerdo tá agora vou adicionar o botão aqui tá antes da lista pode ser no botão tipo type botão para a gente poder clicar esse botão clica aqui e esse botão vai emitir uma ação essa ação vai ser lidada no reducer e a gente vai modificar o estado do redux essa modificação do estado vai causar a a chamada do méxico de props novamente tá então vai adicionar um clique vou chamar o definir o método no lista de mandas chamada um clique mesmo nome tá deixa eu abrir clica e escrever um clique o da o console log aqui também lista de bandas um clique salvar no tal botão lá se clicar vai dar o console log tá então aqui a gente vai emitir uma ação a como é que a gente vai fazer isso então a gente usou o connect então o list de bandas está conectado ao redux se você for no render aqui eu adicionar desse ponto prop no console log você vai ver que o lista de bandas recebe as seguintes prop lembra que é ser bem bandas né já sabia disso mas também o método dispatch do redux para a gente poder emitir ações despachar ações tá então a gente vai usar esse cara desse ponto props dispatch e passa um objeto descreve a ação a ação sempre tem pelo menos o propriedade type e eu vou dizer o ação de sei que é modificar a estado tá tá tá e fazer assim tá e se você quiser adicionar mais negócio botar pelo tá qualquer coisa aqui e lá nova data por exemplo tá então eu vou emitir essa ação de tipo modificar a estado e vou botar como um payload aqui uma nova data quando você der um click clicar o botão agora para poder clicar esse cara vamos dar o bind no constructor senão ele vai dar problema quando você se aferir ao des dentro do um clique super props a des um clique des um clique bind des e clica aqui tá clica aqui certo mas agora a gente tem que lidar com essa ação porque a ação foi emitida mas não tá sendo lidada no redux para lá no redux 4js no redux aqui não tem nada então eu vou botar se a action ponto type o tipo de ação for modificar a estado nós queremos retornar um novo estado tá então vou dar o return um objeto fazer as propriedades do estado anterior e adiciona nova propriedade tá eu só vou dizer sei lá nova propriedade aqui vai ser o action ponto payload aquela data tá e aí e aí e aqui ficar tudo certo se você quiser verificar se nova propriedade realmente foi mudado você pode ir no lista de bandas injetar a propriedade no map state props aqui chamada nova propriedade vai ser state ponto nova propriedade só para ver ficar lá no console log que realmente apareceu norte inicialmente não tem nada clica aqui nova propriedade virou date legal vamos lá botar o console log aqui no map state props pra ver realmente a chamada novamente essa função e também no selector bando selector vai no selector ponto js bando selector e vou dar um console log salva aqui vamos olhar os console logs e aí inicialmente o map state props é chamado e o selector de bandas é chamado finalmente o lista de bandas é renderizado aí a gente clica o botão depois disso o botão é clicar maps state props olha aqui chamado novamente o selector é chamado novamente lista de bandas tudo certo a propriedade aqui mudou tá então se você continuar fazer isso note que sempre fica chamando o map state props e o selector mas vamos supor que essa nova propriedade eu vou comentar aqui tá não seja relacionada desse componente embora que esteja lá no estado do redux né vamos supor que a gente não depende desse cara mas se eu clicar aqui o botão pra permitir a ação que vai setar o nova propriedade fica sempre chamando o bando selector um app state props porque porque o estado do redux mudou estado tem tudo mesmo que a gente só use a parte daquele estado ele ainda vai chamar o map state props se o bando selector ou qualquer outro selector que a gente está usando aqui fosse um selector que fizesse computação intensiva que demora que leva muito ao processamento não não é pegar e fazer isso de novo que a gente já fez a computação né mas é aquele mesmo problema que a gente já falou então para isso a gente precisa fazer a memoização agora você pode fazer isso manualmente mas eu vou te ensinar como fazer usando o reselecta se fosse manualmente você teria que ir lá no seletor no seu seletor você teria que checar armazenar o cálculo por exemplo se seletor faz nos cálculos aqui no corpo dele naquela primeira vez que você fizer o cálculo você pega o resultado armazena em algum alguma estrutura uma estrutura de armazenamento de resultados anteriores por exemplo um objeto aí se você chamar os bandos selector novamente você checaria com essa entrada aqui nesse caso com o banda hash e use de se ele forem os mesmos tá se a entrada foi a mesma eu olho naquela tabela aí eu já fiz esse problema com essa mesma entrada tá de bandas e hash de solução o valor tá aqui eu vou usar esse valor pronto tá aí essa é o retorno do seletor tá com o puteio não precisa fazer isso novamente então isso pega o resultado na mesma hora em vez de partir para os cálculos novamente tá mas a gente não vai fazer isso a gente vai usar o reselect que vai fazer isso tudo para a gente então para essa aula é só e até a próxima