Aula 16
Implementação do onChangeText do Campo de Email Através do mapDispatchToProps
Summary
Resumo do Transcript
Neste trecho, estamos discutindo a implementação de um action creator para alterar o email de login em uma aplicação. A seguir, estão os passos principais abordados:
-
Definição do Action Creator:
- O action creator, chamado
changeLoginEmail
, será responsável por processar o texto digitado pelo usuário, que representa o novo email.
- O action creator, chamado
-
Uso de
mapDispatchToProps
:- É necessário injetar o action creator como uma propriedade do componente usando
mapDispatchToProps
. - Pode-se utilizar um atalho, passando um objeto com o nome do action creator (neste caso,
changeLoginEmail
).
- É necessário injetar o action creator como uma propriedade do componente usando
-
Importação do Action Creator:
- O action creator deve ser importado de um arquivo chamado
actions index.js
. - O uso do ES6 permite simplificar a destruturação do objeto, não sendo necessário repetir o nome da chave.
- O action creator deve ser importado de um arquivo chamado
-
Chave do Action Creator:
- O nome da chave injetada pode ser alterado, mas neste caso, opta-se por manter o mesmo nome
changeLoginEmail
para simplificação e clareza.
- O nome da chave injetada pode ser alterado, mas neste caso, opta-se por manter o mesmo nome
-
Próximos Passos:
- O próximo passo é definir a função do action creator dentro do arquivo de ações (
actions index.js
).
- O próximo passo é definir a função do action creator dentro do arquivo de ações (
Este processo é uma parte importante do gerenciamento de estados em uma aplicação React, utilizando Redux para a manipulação de ações e estado.
Video Transcript
Então, a gente vai passar com um argumento para o change login email esse texto, dessa
maneira, tá bom?
O que está acontecendo?
Esse cara aqui vai ser o action creator, criador da ação.
E quando a gente chamar, vai passar o texto que a gente digitou.
Esse cara aqui é o argumento da função de flash, que é a coisa que a gente digitou.
E a gente vai mandar uma action que vai ter a coisa que a gente digitou, o texto.
E esse cara vai ser pego no af reducer aqui e vai retornar ao novo state com esse cara
atualizado, esse email ou o password.
Tá bom?
Então, vamos definir esse action creator.
Primeiro de tudo, ainda que não esteja definido para usar ele como propriedade do componente,
a gente precisa injetar usando o map dispatch to props.
Nada final, você vai lá e digita o map dispatch to props.
Ou você pode usar um atalho que é só passar um objeto com o nome do action creator, change
login email, ok?
Depois você pode passar o objeto, change login email, que vai ser o quê?
Esse aqui vai ser a chave que será injetada como props e vai ser o change login email que
a gente vai importar.
Vamos importar esse cara.
Import o quê?
Change login email.
Eu vou destruturar o que a gente vai fazer assim.
Vamos...
Vai estar dentro do actions index, tá bom?
A gente vai fazer assim.
Vamos botar index, não precisa digitar index.
E assim.
Esse cara a gente não definiu ainda, mas vai estar dentro do actions index.js, tá bom?
Então, esse cara, change login email, vai ser esse aqui, tá?
E vai ser injetado como essa chave aqui.
Esse aqui poderia ser qualquer nome.
Poderia ser esse negócio aqui.
Queria chamar esse cara, tá bom?
E a gente vai ser ID quando queria chamar esse, por exemplo, algo.
Se eu botar o nome algo, eu tenho que chamar aqui dentro, desco, props, algo, tá bom?
Nesse caso eu não quero, eu quero o seu mesmo nome, então vou voltar o mesmo nome.
Change login email.
Como eu estou usando a versão s6, eu não preciso digitar se o valor for o mesmo do
propriedade do objeto.
Então, vou tirar assim, porque é muito melhor.
Tá bom?
Esse aqui é o atalho pro map dispatch to props.
Vamos definir esse action creator agora.
Vou para o index do actions aqui, tá bom?
Vamos lá definir qual é o nome da função.
Vamos lá export.
Vamos lá.
Vamos lá.
Vamos lá.
Vamos lá.
Vamos lá.
Vamos lá.
Vamos lá.
Vamos lá.
Vamos lá.
Vamos lá.
Vamos lá.
Vamos lá.
Vamos lá.
Vamos lá.
Vamos lá.
Vamos lá.
Vamos lá.
Vamos lá.
Vamos lá.
Vamos lá.
Vamos lá.
Vamos lá.
Vamos lá.
Vamos lá.
Vamos lá.
Vamos lá.
Vamos lá.
Vamos lá.
Vamos lá.
Nenhum comentário ainda (loading...)
Nenhum comentário ainda (loading...)
Gostou da aula? 😆👍
Apoie nosso trabalho com uma doação: