Resumo do Transcript

Ok, então nós temos que adiantar algumas coisas aqui, o primeiro de tudo vamos dar uma olhada aqui no mapDispatchToProps MapDispatchToProps que é passada como segundo parâmetro para o connect Tem duas maneiras de passar as funções actionCreators usando mapsDispatchToProps A primeira maneira de usar a função, a função tem que dar um return com bind actionCreators Sendo chamado aqui, outra maneira é fazer o mapDispatchToProps como um objeto com o changePostArrow aqui Então há duas maneiras, esse aqui é um deles e esse é outro deles Para ilustrar esse foi primeiro comentar esse, essa primeira coisa a gente tem que ajeitar Adiciona bind actionCreators, vamos lá em cima importar do Redux Import, então Redux, certo? Agora outra coisa aqui, voltando a WinDex dentro da Actions Nós definimos changePostArrow mas não exportamos, export essa função para ser disponibilizada em outros arquivos Volta no PostNew, corrigimos o mapDispatchToProps, esqueci também do dispatch, desculpe que é o segundo parâmetro aqui para o bind actionCreators Bind actionCreators, os actionCreators que queremos injetar e o dispatch Dispete sempre o argumento dessa função do mapDispatchToProps, nesse caso Salvar, certo? Então ele faz o menos problema do mapDispatchToProps e exportamos o actionCreators Agora vai ter problema do binding, senote que o ownChange do textInput chama essa função Vamos dar um console log da palavra chaveDs, dá um console log para ver o que significa isso Voltando aqui ao terminal, novo, desculpe, clica no, digita alguma coisa O que é esse objeto? Tem o ownChange, o styleOwnChange, o ownTiralChange e o styleHideFamilia Esse cara aqui está se referindo ao textInput, mas isso não é o que a gente quer porque a gente dá o desmontoProps E quer se referir às props do PostNew, então está errado, por isso a gente quer dar um bind, bind é o problema de binding Então vamos lá, vamos comentar isso para resolver de maneira rápida, ponho bind dessa aqui Certo? Plalizar novamente Existe alguma coisa, agora está dando um console log do verdadeiro PostNew, que a gente quer O PostNew tem umas props, certo? A gente postar esse por diante Essa maneira resolve o binding de maneira rápida, mas pessoal geralmente não recomenda fazer bind aqui Normalmente, o pessoal dá o bind no constructor, vou demonstrar aqui essa maneira de dar o bind no constructor Em vez de dar aqui, você corta isso, faz uma função defineConstrutor, constructor, constProps Chama o super com props e aqui faz o bind, this.ontTiralChange vai ser igual a this.ontTiralChange.bindDesse Isso é? Salva Vamos novamente ver se o bind está correto da palavra chave des O que é isso? Certo? Está correto Então a maneira de resolver o bind no constructor normalmente põe todos os binds aqui depois do super com props e depois define o estado inicial Se não estiver usando redux e essas coisas Certo? Tem também outra maneira de resolver esse problema sem dar o bind aqui Essa maneira é usando property initializers, que é além do s6 Não veio no s7, mas vai vir depois, provavelmente, já disponível com o babo e isso em por diante, vou demonstrar como usar aqui Em vez de ter esse constructor, deixa eu só recortar isso Você vai definir o ontTiralChange com a função de flecha Esse cara é um property initializer com a função de flecha Você está combinando a função de flecha com o property initializer Dá para fazer isso aqui e a função de flecha Com a função de flecha, no contexto da palavra chave des, não é definido pela função É definido pelo elemento que encobre essa função, nesse caso postNew Então o des vai ser ferir a postNew Certo? Você pode ler mais a respeito da error function, função de flecha, na MDN Para saber por que isso acontece Agora vamos testar Está correto Então vou deixar esse bind assim, se você quiser usar o constructor, pode usar também Vou voltar o modelo e está isso Vou retornar esse cara Vamos ver se não tem mais nenhum problema Deixa eu remover isso também Deixa aqui salvar Novo Certo? Agora está funcionando bem direitinho