Antes de continuar, eu gostaria de contar com seu apoio para continuar a fazer vídeos. Vou falar sobre o subscreva ao meu canal do YouTube, NBKTutor. Também estou disponível nas redes sociais, NBK Hope, no Twitter e também no GitHub, NBKHOP. Então, muito obrigado e vamos continuar. A gente terminou a dar uma aprimorada no nosso código. A gente aprendeu a fazer o nosso módulo para fazer o import muito mais fácil e só em uma linha. Agora, a gente pode prosseguir para continuar a fazer o aplicativo. A gente fez esse input, a gente fez o botão button e a gente também fez o spinner. Vamos fazer essa cena e continuar. Entrar, carastrar, email e assim. Vamos só deixar isso certinho. Vamos remover esses textos do loginform. Agora estou no loginform.js, removi esses textos, deixei o input para o email também. Vou dar outro input para o password, para a senha. Vou quebrar a linha label, vou chamar de password. Se você quiser para chamar a senha. E o value vai ser alguma coisa que eu vou definir depois, se eu quiser botar alguma coisa agora. Só para deixar algo lá. Onde change text, ainda não definimos, vamos botar no e fechamos o input. Um botão de entrar, botão de cadastrar, remove esse texto aqui, esse spinner também, não vamos precisar ainda. Vamos dar um refresh, atualizar e ver o que acontece. Está tudo ok aqui, nem que esteja o estilo não é muito legal, mas você vê que já está funcionando. Há uma coisa a notar, que a senha aqui não está mostrando a senha. Isso é um detalhe que a gente precisa ajeitar no nosso input. Então, vai para o input aqui. Para o text input, tem uma propriedade chamada secure text entry, que se você adicionar para o value para ser true, se você só adicionar isso aqui, a mesma coisa de true, não precisa dizer true, é implícito. Se eu adicionar, por exemplo, você vai ver o que acontece com o nosso input. Fica parecendo não, não mostra mais. Para isso, que a gente só quer para a senha, a gente pode passar esse cara com uma propriedade, secure text entry do props, props want secure text entry. Nesse caso, a gente pode destruturar do props aqui. Vamos adicionar aqui, secure text entry. Você não acha que a linha está ficando um pouco longa, mas vamos deixar aqui. Tira esse cara e, por padrão, se não passar em text entry, eu vou botar como se fosse false. Eu vou botar falso, se eu não passar secure text entry. Vamos ver o que acontece. Todos vocês falsos, então vai aparecer. Mas para o password, a gente não quer que apareça. Vamos lá no password, adicione no final secure text entry. Por padrão, é true, então não precisa digitar true, é implícito. Eu adicionei lá e vamos ver se funciona. Muito legal, agora o password assim não aparece. Valeu. Agora a gente pode prosseguir para ajeitar esses on change text e o valor. Então esse value vai ser, na verdade, o valor no Redux, tá bom? Você nota que a gente fez antes, deixa eu cadê a tela aqui que a gente fez, esse cara aqui. Note que a gente vai ter o application state do Redux. Do auth reducer, vai retornar ao novo estado com essas propriedades aqui. Então esse valor aqui do email vai ser ligado a esse cara e esse do password vai ser ligado a esse cara. Note que são todos do Redux. Então para a gente injetar como propriedade esses valores a gente vai precisar conectar o React ao Redux. Como é que faz isso? Você se lembra? A gente usa a função chamada connect. Então vamos aqui no topo importar connect do reactRedux, tá bom? E no final vamos export a file, adicione o connect e o argumento final aqui é o login. Note que tem dois parentes, tem esse aqui e tem esse aqui para o componente, não componente. Primeira função mapDispatch, desculpa, mapStateToProps, tá bom? Então vamos definir, mapStateToProps vai ser a função de flash e o argumento é sempre state, né? E o que a gente quer? A gente quer retornar um objeto que tenha o email e que tenha o password, tá? Note que quando a gente tem o state, eu te falei um tempo atrás que a gente se afere ao email e ao password assim, né? Por quê? Porque a gente olha no reducer index, tem essa chave auth, então vai ter state.auth. O estado que é passado do reducer, né? Que nesse caso vai ser esse cara aqui, vai ser o email e o password. É por isso que a gente tem que dizer assim, então para poder injetar como props dentro do componente loginform, a gente vai retornar um objeto cujas chaves vão ser o que? Vamos botar o email e vamos botar esse cara aqui, vamos recortar, vai ser o state.auth.mail e o password vai ser o que? Vou dar um tempo para você fazer aí. Tá bom? É a mesma coisa, né? Esse cara aqui. Então é só assim, então vai injetar o email, vai injetar o password e a gente vai poder ligar esse cara com o formulário aqui, esses inputs. Então para fazer isso, eu vou aqui, tenho um email, tenho um password como chave, dando propriedades, então aqui dentro do vale vai ser o que? Esse, do prop.mail, esse cara aqui é esse cara aqui que a gente injetou com propriedade, que na verdade é o estado do redux, dentro do estado do redux. E a mesma coisa com password, vou esperar você vai fazer. Que vai ser aqui? Certo, this.prop.password, tá bom? Salvar, então agora vai estar ligado ao redux. Tá bom? Agora, se você fizer isso, vai estar sempre vazio, que se lembra que a gente definiu o initial state para email e password para ser um string vazio, então não tem nada, então você sempre vai ficar vazio, ainda que você digite, vai ficar vazio. Por que? Porque o ontem de text não está definido. Tá bom? A gente vai ter que criar um action creator que vai mandar uma action para mudar o estado do redux, para a coisa que a gente digitou, a novo texto, tá bom? O novo texto. Então, nesse cara aqui, a gente vai ter que usar o que? Criar um action creator. Mas, e quando a gente criar action creator, a gente vai dar o que? A gente vai usar this, tá bom? Vai usar this, do props. A gente pode chamar de qualquer coisa, sei lá. Login, change, login e mail. Qual que é a coisa que você quiser chamar? Tá bom? Ou só change e mail. Vou chamar change login e mail. Tá bom? Vou chamar essa função. E a ontem de text sempre tem o text aqui também. O que é coisa que você digitou é o argumento dessa função.