Aula 20
Caso de Autenticação Bem Sucedida (dispatch e Mudança de Cena)
Summary
Resumo do Transcrito
O usuário fala sobre a autenticação e manipulação de um sistema utilizando React Native e Redux.
Principal Tópicos Abordados:
-
Autenticação:
- O usuário menciona a importância de garantir que os arquivos estejam salvos e que a autenticação esteja funcionando corretamente.
- Após tentar entrar no sistema, alguém comenta sobre a necessidade de atualizar e verificar as credenciais.
-
Mudança de Cena:
- Explica o processo de mudança de cena após a autenticação, usando
react-native-router-flux
. - Menciona a necessidade de chamar a ação para mudar a cena e a importância de importar os
actions
.
- Explica o processo de mudança de cena após a autenticação, usando
-
Formulário e Estado:
- O formulário é discutido, incluindo como limpar os campos após o login, utilizando Redux para despachar uma ação ao ter sucesso na autenticação.
- O estado inicial é utilizado para limpar as informações do formulário.
-
Propiedades do Input:
- Há uma atenção especial a como o e-mail é tratado no input, especificamente sobre a capitalização automática.
- O ajuste
auto-capitalize
é configurado paranone
no campo do e-mail para evitar a capitalização automática da primeira letra.
-
Tratamento de Erros:
- O usuário observa como o sistema lida com erros de autenticação, demonstrando a mensagem quando a senha é inválida.
Conclusões:
O usuário demonstra um passo a passo sobre como configurar a autenticação, gerenciar estados e formularios, além de interagir com o sistema de forma intuitiva com reações sobre os resultados das ações executadas.
Video Transcript
Provavelmente esqueci de salvar os arquivos, se o personal está aqui está tudo certo.
A gente fez as coisas certas, dá uma atualizada, vamos ver o que acontece.
O meu.com, tirar esse M aqui, entrar, deu nisso, é a resposta aqui.
Se notam não sei o que, várias coisas, o e-mail é esse, vermo?
Aqui é o seu, não tem foto, mas tem o seu usuário, a id de usuário, identificação,
que deve ser a mesma, vamos lá para o console, dzdo, dzdo, mesma coisa.
Então, mandou o usuário authentico mesmo, deu certo.
Legal, hein?
Agora, se a gente digitar alguma coisa que não seja,
vai dar em erro, vai dar esse negócio, message do erro, e o meu address, não sei o que, e essa coisa, muito legal.
Tá bom? Vamos deixar esse console logo aí, só para você ver o que é a resposta.
Então, a gente autoneticou, só falta a gente mudar para a outra cena.
Vamos lá, vai para o, onde? Action Creator, vai para o login aqui.
O que acontece se a gente autoriza e der certo?
O sucesso vai aqui para o caso do then, e a gente vai mudar de cena.
Se lembra como é que a gente muda usando react-native router flux?
Se você não viu meu vídeo de introdução Redux, vamos aprender.
Para a gente mudar de cena, a gente vai chamar actions.acquidacena.
Vamos lá voltar para aquele arquivo chamado router.
Você note que tem aqui para cada cena, então a gente quer ir para key main.
Pega a sua chave, actions.main, e chama como uma função, e é isso, só isso.
Vai mudar, muda de cena.
A gente tem que importar actions do react-native router flux.
Vai lá no cima, importe, distruturar actions from react-native router flux.
Só isso.
Vamos lá, muda de cena.
Vamos tentar novamente, marco mail.com, entrar, cadê?
Ah, esqueci, até vai estar o M, né?
Ei, e aí?
Estamos dentro do sistema, finalmente.
Você nota que o react-native router flux, adiciona esse botão de voltar também,
a gente pode ver o que aconteceu antes, mas deu tudo certo, autentificado.
Só voltar aqui para você ver algumas coisas que a gente tem que ajeitar.
Note que quando eu volto aparece o email e passo o ordem novo,
mas normalmente a gente tem que limpar esse formulário depois que a gente clica em entrar, tá bom?
Então para fazer isso, o que é que eu vou fazer?
Quando a gente der sucesso aqui, antes de mudar para a cena,
eu vou despachar uma ação.
Quando a gente está usando Redux Slunk, a gente pode chamar de dispatch e passo o objeto da ação, tá bom?
Vai ser o type, o quê? A gente vai botar login, user, sucesso, sucedido, tá bom?
Só isso.
Vamos criar isso, vou copiar.
Vai lá em cima.
Eu vou break a line aqui.
A gente vai importar do arquivo, login, user, sucesso, vamos definir dentro de types.
Vamos lá, vamos lá. Export const, login, user, sucesso.
É uma string com o mesmo nome.
Só isso.
Voltando ao index.
Definimos, importamos o tipo de ação logo em user, sucesso.
Despachamos quando foi autenticado.
Vamos lá no reducer, author reducer, para lidar com essa ação.
No caso de csk, a gente vai limpar o formulário.
Em vez de passar a state, não sei o quê, eu só vou retornar o initial state para limpar tudo.
Tá bom? Initial state vai retornar esse cara que está tudo vazio.
Só isso, muito simples.
E temos que importar isso. A gente vai aqui, deixa eu quebrar a linha, e importar esse cara.
Salvar, vamos testar.
1, 2, 3, 4, 5, 6.
Ah, esqueci esse M aqui, muito chato, vamos ajeitar isso depois, espera aí.
Entrar, ter uma entrada, voltando, formulário está vazio, muito bem.
Muito bem. Agora vamos ajeitar esse email aqui, rapidinho.
O problema é que está capitalizando o primeiro letro.
Para isso não acontecer, a gente vai lá no input, tá bom?
Esse cara tem uma opção chamada auto-capitalize, eu acho.
Só olhar no documentação do React Native, se esquecer, documentação do text input.
Salver.
E vai ser auto-capitalize, a gente vai setar para none, tá bom?
Vamos aqui, antes de secure text entry, a gente vai botar auto-capitalize, tá bom?
Se você não quiser que auto-capitalize, você põe none, tá bom?
Se você quiser que o usuário entry auto-capitalize, e se não entrar, vai por padrão ser none.
Depende de como você criar o sistema.
Se você quiser o padrão para ser capitalizado, você põe aqui diferente, né?
Se você olhar na página do React Native, vamos ver.
Cadê, cadê, cadê?
Quero não, text input.
Auto-capitalize.
Cadê auto-cap...
Está aí, acho que é o primeiro.
Esse cara aqui, você pode escolher o padrão para você.
Eu vou escolher none para não capitalizar nada, tá bom?
Mas se o usuário quiser mudar isso, é só passar com propriedade.
Eu vou adicionar aqui.
Auto-capitalize, vírgula.
Salva.
Padrão é none.
Bom?
Vamos testar.
Então, eu nem preciso passar auto-capitalize aqui no login form,
aqui no e-mail, porque o padrão que você tem lá é o none, vai lá para o none.
Então, vamos lá.
Finalmente, não capitaliza mais.
Yeah.
Alê-o.
Agora a gente vai mudar a ver.
Parece um erro.
Olha o erro.
Password invalid, não sei o que.
O user não tem password.
Muito legal, né?
A gente pode saber a mensagem do erro aqui.
Um, dois, três, quatro, cinco, seis.
Entrar.
Passou o objeto, o responso.
Tudo OK.
Bem-vindo.
Nenhum comentário ainda (loading...)
Nenhum comentário ainda (loading...)
Gostou da aula? 😆👍
Apoie nosso trabalho com uma doação: