Aula 16
Botão e Criador de Ação para Criar um Novo Post
Summary
Resumo do Transcript
Neste vídeo, o apresentador explica como finalizar a implementação de uma cena de um novo post, focando na criação de uma função que será chamada ao clicar no botão "OK". O passo a passo da resolução envolve a criação de um método chamado onOKPress
, que é responsável por gerenciar a submissão do formulário.
Passos principais:
-
Definindo a Função
onOKPress
:- A função é criada sem a forma de uma função de flecha para evitar problemas com o contexto da palavra-chave
this
. - O
console.log
é usado para verificar qualthis
está sendo referenciado.
- A função é criada sem a forma de uma função de flecha para evitar problemas com o contexto da palavra-chave
-
Capturando Propriedades:
- O título (
title
) e o corpo (body
) do post são extraídos das props usando destruturação para um código mais limpo.
- O título (
-
Criando um Action Creator:
- Um action creator chamado
createPost
é definido, que Faz um pedido HTTP para criar um post com o título e o corpo. - O tipo da ação é definido como
create post
, e o payload que retorna inclui o post criado.
- Um action creator chamado
-
Lidando com Ações no Reducer:
- O reducer é ajustado para lidar com a nova ação
create post
e retornar um novo estado que limpa o formulário, utilizandoinitial state
.
- O reducer é ajustado para lidar com a nova ação
-
Testando a Implementação:
- O funcionamento da nova funcionalidade é testado, verificando se o formulário é limpo após o envio e se a ação está correta.
Conclusão:
No final do vídeo, o apresentador menciona que no próximo vídeo será abordado como voltar para a cena anterior após a criação do post.
Video Transcript
Então vamos continuar e finalizar essa cena aqui do novo post.
O que a gente vai fazer agora?
A gente vai criar uma função que vai ser chamada quando a gente clicar ou tocar esse
botão OK.
Então vamos lá.
Certo? Vamos criar uma função.
Vou chamá-la de onOKPress.
Essa maneira.
Eu vou tirar essa função de flecha e vou deixar só assim.
Desse ponto onOKPress.
Desse referir ao componente postNew.
Então a gente vai criar um novo método.
Vamos lá.
OnOKPress.
Tá bom?
Será que eu faço de flecha ou faço só assim?
Você acha?
Vai dar problema em bind?
Da mesma maneira que a gente teve problemas antes.
OnPress.
Vamos ver o que acontece.
Só dar o console log desse para ver.
Deixa eu abrir o debugger aqui.
Então quando eu clicar aqui, clicar OK.
Deu o console log da palavra-chave desse.
Que se refere ao próprio botão, né?
Proprio
Totable Opacity.
Então tá errado, então por isso que a gente vai usar o
property initializer com a função de flush.
Agora o contexto da palavra-chave desse vai se referir ao componente postNew.
Novamente, só para te mostrar.
Clica lá, clica OK.
Agora você vê o console log é do componente postNew.
Agora tá certo.
Então vamos prosseguir, vamos voltar a editor de texto.
E vamos definir aqui o onOKPress.
Primeiro a gente vai precisar do quê?
Para submeter esse formulário, esse novo post.
Vai precisar do título e do conteúdo que a gente chamou title e body.
Então o title e body são props.
Então eu vou pegar as props.
Des, ponto props.
Ponto body.
Des, ponto props, ponto título, né?
Então vai ter esses dois caras disponíveis.
Opa.
O que a gente vai fazer?
A gente vai pegar esses dois, essa informação.
Vai mandar para o action creator.
Que a gente vai criar.
E esse action creator vai fazer o pedido HTTP.
A gente vai receber a resposta, tá tudo OK.
E a gente vai mandar o cara voltar para a lista de posts.
Entendeu?
Então esse action creator, vamos chamar de create posts, por exemplo.
Então aqui...
Vamos chamar esse create post e vamos passar a informação do post.
Nesse caso eu vou passar um objeto com o título e o body, né?
Nesse caso vai ser esse.
E esse cara aqui, né?
A gente ainda não definiu esse action creator.
Mas a gente já sabe que os action creators são injetados como props
devido ao map dispatch to props lá embaixo.
Que a gente vai ajeitar já, já.
Mas só aqui focar aqui nesse argumento para essa função.
Tá muito longo, né?
Então a gente vai fazer um refactory aqui.
Então refatorização.
E eu vou primeiro destruturar o título e o body do objeto devs.props.
Dessa maneira.
Nesse caso a gente está extraindo propriedade de título e propriedade de body
desse objeto devs.props.
Então a gente não precisa mais digitar devs.props.
Agora como esse objeto, essa chave aqui, tem o mesmo nome que o valor,
a propriedade tem o mesmo nome que o valor,
pode remover isso.
É a mesma coisa.
No s6, partido s6, né?
Então aí fica muito melhor de código mais limpo, né?
Certo?
Então vamos lá e definir esse action creator.
Mas antes disso, vamos lá embaixo.
Como a gente está usando isso aqui, create post,
a gente tem aqui primeiro lá embaixo.
Cadê o map dispatch to props?
Adicioná-lo.
Create post.
Certo?
Mas quem é create post?
A gente precisa importar.
Então vamos lá para o top.
E vai aqui, a gente está importando a actions, né?
Esse arquivo.
Vamos adicionar o create post.
Agora a gente tem que definir o create post.
Certo?
Vamos lá para o index do actions,
da parte da actions, aqui.
Vamos lá criar o nosso action creator.
Export const, create post.
Uma função de flecha.
E o argumento vai ser o post mesmo.
E é um objeto que irá conter o title e body.
Certo?
Como é um action creator?
No final, a gente sempre tem que retornar o quê?
One action, produzir one action.
Ação.
A action vai ter o tipo e vai ter o payload.
Certo?
Agora, vamos criar esse tipo de action chamado create post.
Está bom?
Esse é o nome que a gente vai usar.
Nesse caso, payload.
Quá era que vai ser o payload?
Nesse caso, precisa ter payload.
Normalmente, quando você cria uma coisa,
se for restful, né?
RESTful.
Quando dá o create, o post sempre retorna o post que foi criado com o ID.
Então, se você quiser usar isso, a gente pode acionar aqui.
Se quiser, nem precisa ter o payload aqui,
mas se bem que a gente vai usar o request,
então vai ter que ter.
Então, vou botar o request aqui.
Mas o que é o request?
A gente tem que pedir HTTP aqui.
Nesse caso, vai ser o quê?
Vamos dar o request, vamos definir esse request.
Vamos usar o axios.
Pedir o post.
Para onde?
Voltando aqui lá em cima, senorte,
a gente sempre usa o axios e usa essa variável que é o request, o rl,
que vai ser o rl da API e a gente adiciona o endpoint.
Certo, então vamos lá.
Da mesma maneira que a gente fez os outros,
vamos fazer aqui.
Dá uma string interpolation, interpolação,
request, o rl, barra post.
E segundo argumento para a função post,
método é os dados, que nesse caso vai ser o post.
Certo?
Então, quando chamar o action create, create post,
com os dados do post, que é o título e o body,
vai dar o pedido HTTP post, request, o rl, barra post.
Certo?
Me manda o post, cara.
E vai retornar essa ação chamada create post,
tipo de ação com o payload que vai ser o novo post com o id.
Certo?
Como é que a gente vai testar isso?
Vamos lá aqui, post new.
Voltando a post new, certo?
Voltando para o on, ok press.
This property post.
Certo?
Voltando, eu vou aqui no post reducer.
Você nota que a gente manda essa ação de tipo create post,
mas ela não é lidada ainda.
O post form reducer, se você for o post form reducer,
ele não sabe como lidar com a create post.
Então, tem que adicionar um aqui.
Case create post.
Nesse caso, eu posso dar um...
Deixa eu dar um console log aqui.
Console log do action.p load para ver se deu certo,
só para testar.
Certo?
Mas o que a gente realmente quer fazer nesse caso,
é quando você vai aqui e digita alguma coisa,
você clica ok, né?
Nesse caso, a gente quer limpar o formulário,
certo?
E voltar para a lista.
Mas como a gente vai limpar esse formulário?
Se você lembrar, esse campo de texto aqui
e esse outro aqui do conteúdo,
são ligados ao estado do redux.
Nesse caso, o título e o body, né?
Mas como a gente digitou alguma coisa,
esses caras têm algo diferente.
Nesses caras vai ter aquele A, S, D no seu que,
e o body vai ser D, S, A no seu que.
Então, a gente quer limpar esses caras.
Qual é a maneira mais fácil de limpar?
Note que o reducer sempre retorna um novo estado, né?
Mas eu tenho esse estado aqui numa variável,
chamado initial state.
Então, vamos só retornar ele dessa maneira aqui.
Se você criar um post, a gente quer limpar o formulário.
Como é que limpa?
É só retornar um objeto com um novo estado.
Nesse caso, esse objeto initial state
tem um título vazio e o body vazio.
E é a maneira mais fácil de limpar o form, certo?
Então, vamos dar um teste lá.
Voltando aqui, eu vou dar refresh.
Se você estiver usando um Android,
tem também, cadê o meu?
Aqui, em um lado.
No Android, eu tenho que apertar,
apertar e segurar o R no Mac,
para dar refresh.
Então, vamos dar, vou fazer Android aqui,
que eu já fiz no iOS.
Título 1, 2, 3, não sei o que,
conteúdo, blah, blah, blah.
Eu vou clicar no OK.
Você not já limpou, né?
Tudo, porque eu fiz o return initial state.
Agora que não tem um console log,
porque esse console log parece só do iOS.
Então, deixa eu fazer aqui no iOS.
Deixa eu digitar alguma coisa.
Esse cara aqui.
Vou clicar OK,
vou clicar OK,
vai limpar o formulário.
E você not que eu tenho um objeto aqui do console log?
Se você lembrar, a gente deu o console log do payload.
Já not que tem o que a gente digitou e tem o ID.
Certo?
Então, está tudo OK.
Então, quando a gente criar isso,
a gente quer voltar para a cena anterior, né?
A gente vai fazer isso no próximo vídeo.
Nenhum comentário ainda (loading...)
Nenhum comentário ainda (loading...)
Gostou da aula? 😆👍
Apoie nosso trabalho com uma doação: