Summary of Change Login Email and Password Functionality

export const, o nome da função change login email, qual o argumento? vai ser o novo email, né? e eu esqueci do igual, tá bom? então a gente vai... esses caras são chamados action creators, só uma função e vai ter que retornar uma ação e nesse cara a gente vai export const, se a gente export sem um default, vai criar objeto assim com as chaves assim, sendo o email, não sei o que, né? na verdade é isso que acontece e assim por diante, é bom? é isso que a gente vai fazer então vamos lá, a gente vai pegar esse email que é o texto digitado a gente vai retornar uma action, action é só um objeto JavaScript que tem um tipo e tem um payload tipo vai ser o quê? vamos lá, change login email, vamos criar essa constante a payload vai ser só o email, esqueci da vírgula então o tipo de ação normalmente é one string, tá bom? e a gente normalmente põe de capital letra de forma, né? change login email mas a gente... tipicamente pega esse cara, faz uma constante, tá bom? const, change login email e declara com o mesmo nome vai ser a mesma coisa, como a string, change login email, tá bom? e define esse tipo de ação normalmente a gente pega esse cara e põe um arquivo chamado types eu vou criar um arquivo chamado types.js dentro do actions e aqui que eu vou declarar a constante, tá bom? eu declaro aqui const e export, export const, tá bom? export const esse cara e daí para usar isso do action creator eu vou dar um import ok import change login email from actions desculpa, from types do mesmo direto e aí pode usar esse cara, salvar, tá bom? deixa eu botar o nome aqui import action types tipos de ação cadê? dá o cd já 6 criadores de ação tá bom? então, action creator retornam action essa ação é despachada para todos os reducers mas o action reducer é o que a gente vai usar vai no author reducer, esse cara a gente se importa com action então, no caso de que action.type seja change login email a gente vai fazer alguma coisa mas note que a gente não tem importado esse então vai aqui import import change login email da onde? from acima dois pontos, não se esqueça e tá dentro do actions dentro do types pra usar e nesse caso o que a gente vai fazer? change login email, a gente vai retornar um novo estado estado é só um objeto, tá bom? vai pegar todas as propriedades do estado passado assim que a gente faz e vai adicionar o que? ou modificar o que? nesse novo objeto, novo estado o email, né? vai ser a coisa que passou action.payload tá bom? e botar um ponto e um vírgula note que esses três pontos significa você pega o objeto do estado pega todas as propriedades adiciona ao novo objeto que é esse cara aqui todo e modifica o email pra ser action.payload e no final esse cara vai estar modificado sempre retornamos o novo estado não se esqueça, novo estado sempre retornado do reducer não pode modificar o estado atual a gente tem que retornar sempre o novo estado dá um return aqui não precisa de break que eu já tô retornando detalhe, salvar e vamos ver o que vai acontecer definindo o action creator já tá sendo usado no login form que a gente deu setup configuração, vamos testar o que que deu errado aqui? não existe o problema aqui é do que? esse importo tá errado do change login email dentro do login form tá dentro do que? do componente da gente ter que do um nível acima na pasta actions do index, não precisa de digitar index esqueci dois pontos salvar, vamos lá vamos tentar digitar alguma coisa no email tá funcionando né? tudo bem agora então o que que tá acontecendo? então vamos olhar aqui no momento que você digita alguma coisa a onchange tax essa função vai ser chamada tá bom? deixa eu botar aqui vai chamar essa função o texto é o que você digitou no novo texto vai chamar action creator com texto esse cara aqui, é esse cara que a gente definiu a gente tem um email retornação chamada change login email e vai passar esse texto que a gente digitou nesse caso vai ser a, a, d, s não sei o que esse cara vai ser despachado, essa ação pra todos os reducers mas o auth reducer que vai se importar porque a gente tem o case login email nesse caso a gente vai retornar o estado que era antes nesse caso era só o email password vazio com o email modificado agora o email vai ter a coisa que a gente digitou action.payload se você voltar pro action creator a gente deu payload com o email a coisa que a gente digitou então tá aqui então esse cara aqui vai ser a, s, d, no, sei o que o estado né por isso que tá aparecendo aqui toda vez que a gente digita isso acontece ah detalhe também que quando a gente faz isso e retorna novo estado o componente login form vai se renderizar de novo vai chamar render novamente e por causa disso quando bate nesse value aqui vai olhar no no estado do redux e o email como estava a, s, d, no, sei o que vai ser o valor agora sempre assim chama esse cara modifica o estado porque o estado foi modificado a render function, função vai ser chamado novamente e vai dar o novo valor aqui, estado des props email, certo? mesma coisa com password então vou deixar com mais exercício vou esperar você fazer isso o que é que eu quero que você faça? faça a mesma coisa aqui no para password para senha define o one change text, faça um action creator muito similar a esse aqui muito parecido não se esqueça de importar aqui e no final e definir no actions aqui, também tem que ir no reducer e adicionar o caso para esse caso você vai ter que ter outro tipo de action, então crie outro tipo de action aqui nesse arquivo tá bom? eu vou esperar para você fazer e a gente vai continuar e aí deu tudo certo? vamos lá então vou voltar aqui no app desculpa, login form esse one change text aqui vai ter o texto e a gente vai chamar props change login password vamos definir esse cara vamos injetar como propriedade adicionando aqui no map dispatch props no final do connect change login password note que a linha tá muito longa então vou quebrar esse cara em linhas assim e vai ficar melhor esse aqui é o map dispatch props nesse cara a gente tem que importar, note que isso aqui é a mesma coisa que isso né? por isso que a gente tem só o nome é a mesma coisa que isso, esse aqui que a gente precisa importar só adicionar aqui change login password from actions, agora a gente tem que definir vamos lá vou para actions index export const change login password password retornar a ação action qual tipo? change login password, a gente tem que definir payload vai ser o password que a gente passou, vamos definir esse cara aqui vamos lá para action types export const change login password password mesma coisa, change login oh desculpa, password como a string salva, volta para action creator index aqui e importa, change login password password aqui estou dentro do index do actions, terminei vamos para o reducer agora auth reducer a gente vai precisar importar a nova ação também change login password, tipo de ação e vamos ao novo caso case, change login password a gente vai fazer o que? retornar o estado que estava antes mesma propriedades com o password modificado action.paload e assim vamos ver se está funcionando digital password aqui tudo ok dá para delatar, isso é o que tá bom, tudo ok