Aula 18
Término da Implementação para Criar um Novo Post
Summary
Resumo do Vídeo: Implementação de Navegação em um Post Novo
No vídeo, o instrutor demonstra como retornar para a lista de posts após a criação de um novo post utilizando o React Router Flux. Aqui estão os principais pontos abordados:
Objetivo
Após clicar "ok" ao criar um novo post, o usuário deve ser redirecionado de volta para a lista de posts.
Passos Realizados
-
Navegação com
actions
:- O instrutor menciona que para mudar de cena, utilizamos um objeto chamado
actions
. - É necessário chamar
actions.list
para redirecionar para a cena da lista.
- O instrutor menciona que para mudar de cena, utilizamos um objeto chamado
-
Importação:
- Foi feita a importação necessária do
actions
dereact-native-router-flux
.
- Foi feita a importação necessária do
-
Atualização de Componente:
- Um ponto crítico discutido foi sobre o método
component did mount
, que não atualizava a lista quando se usavapop
para retornar a cena anterior.
- Um ponto crítico discutido foi sobre o método
-
Uso de
reset
:- A solução sugerida foi utilizar um objeto com o tipo
reset
ao passar para a cena de lista. Isso garante que a pilha de navegação seja limpa e que a lista seja montada novamente.
- A solução sugerida foi utilizar um objeto com o tipo
-
Teste:
- O instrutor testou o fluxo e confirmou que ao clicar para criar um novo post, a lista foi atualizada e não havia um botão de voltar, conforme desejado.
Considerações Finais
- O instrutor observou que o uso de métodos assíncronos poderia ser benéfico para melhorar a experiência do usuário, caso o servidor fosse lento, mas decidiu manter o exemplo simples.
- O vídeo incentiva a interação nos comentários, convidando os espectadores a compartilharem soluções para a questão do
pop
.
Valeu, e até o próximo vídeo!
Video Transcript
Agora o último detalhe para a cena do postnew, novo post.
Vamos lá.
Nós queremos fazer com que esse formulares seja, depois de clicar ok, que volte a lista
dos posts.
Para fazer isso, a gente vai usar o react router flux, né?
Vamos lá voltar aqui.
Vamos voltar no create post, eu vou voltar lá para, cadê o postnew?
Depois chamar o create post, você vai mudar de cena.
Como é que muda de cena?
Através desse objeto chamado actions.
A gente quer voltar lá para o list, se lembra?
Você volta aqui para o router.js, esse arquivo.
Tem a definição de todas as rotas, chamadas cenas, sim.
Nesse caso tem uma cena com aqui chamado list.
A gente vai chamar um método chamado list, que tem o mesmo nome daqui.
Nesse caso, vai mandar o cara de volta para list.
Certo?
Vamos ver se eu importei esse cara.
Vamos lá em cima, não tem importado.
Então eu vou importar import.
Who actions, down and from, react, native router flux, certo?
Você também podia chamar esse actions.list lá do action creator, do create post aqui
dentro do index, do actions.
Qual é melhor, depende de você, depende de como você está fazendo o negócio, podia
também chamar aqui, entendeu?
Nesse caso eu não estou nem usando o chamado redux trunk, se eu tivesse redux trunk, que
é uma maneira de retornar uma função do action creator, assíncrono, entendeu?
redux trunk.
Vou servir redux trunk talvez eu iria usar.
Mas a gente está deixando as coisas simples aqui, só para aprender, então vamos lá,
deixa lá mesmo.
Cadê?
Voltando a post new, componente post new do on ok press.
Vamos lá ver o que acontece.
Vou dar novo, abc no seu ok, certo?
Então ele voltou, ele deu uma nova list, mas você note que tem esse botão de voltar
aqui, que não é legal, está voltando para o novo post, o que é que é isso?
E se eu voltar de novo, vai voltar para a lista de post, certo?
Não é legal isso.
Eu quero resetar tudo aqui, certo?
Ah, mas só um detalhe aqui antes, você também pode usar o pop, mas tem um problema com
o pop.
Você dá o pop, ele vai para a cena anterior, né?
Vamos testar o pop para ver o que acontece.
Que é o pop.
Negócio do pop é que tem problema.
Ok?
Eu vou dar ok, senão eu vou botar um 230, sei o que, por título.
Ok?
Mas cadê o cara?
Não está aqui.
Não atualizou a lista.
Embora que esteja tudo ok, não tem botão de voltar, que deu pop, voltou para a cena
anterior, não atualizou.
O problema é que este cara estava montado e ele se volta aqui para o component list.
Você note que no component did mount, esse método de life cycle, ele dá o fat post,
né?
Mas como o component já estava montado, não vai mais chamar isso.
Então por isso que não dá para ver o outro.
Você tem que atualizar usando o simulador, você apertar atualizar tudo para reiniciar
o aplicativo, vai estar aqui, apareceu.
Então por isso que eu não vou usar o pop.
Se você sabe alguma maneira de solucionar esse problema do pop, por favor poste nos
comentários.
Seria muito legal saber.
Eu já tentei algumas coisas e não consegui, mas se você souber de uma ideia, por favor
compartilhe.
Então vamos lá, vou prosseguir aqui, voltando na post new.
Não vou dar pop, vou dar list, certo?
Mas eu quero eliminar, quero botão de voltar.
Eu vou passar um objeto para o list.
Esse objeto vai ter esse type reset.
Então a gente vai passar esse cara, é como se fosse uma opção dizendo o react-native
para o router flux, por favor reset tudo aí e comece dessa cena chamada list.
Tá bom?
Passa o objeto, propriedade type, uma string reset.
Vamos ver o que acontece.
Atualizei o app.
Vamos lá clicar novo.
Vamos lá para todos.
Clicar OK.
No notch já resetou e não tem mais botão de voltar e apareceu aqui.
Certo?
Isso que a gente quer.
Recapitulando.
Como é que a gente fez isso?
Lá no OK press, quando você clicar OK, vai fazer esse cara aqui, vai chamar o action.list.
Do react-native router flux, permite você mudar de cena.
Nesse caso, vamos mudar para cena chamada list, mas eu queria que não dá um push, que não
adicione a pira chamada stack, mas que reset, que tira tudo da stack e ponha list do começo.
Monte essa list de novo.
Porque se não montar de novo, não vai chamar aquele fat post no component dead mount.
Entendeu?
Não vai chamar esse aqui.
Então a gente monta de novo, dá um reset.
Só um detalhe aqui, eu sei, esse cara aqui é assícrono, né?
Então talvez aí, se o servidor fosse muito lento, já ia mudando a cena antes de receber
resposta.
Então não é muito bom para user experience, né?
Experiência do usuário.
É isso.
A solução é fazer esse cara ser assícrono e retornar à promessa.
E depois que dar a promessa, não sei o que, você chama o action list.
Mas como nesse vídeo a gente está aprendendo só o básico, eu não vou em detalhes, tá
bom?
Só queria mencionar isso.
Tá certo?
Então valeu, até o próximo vídeo.
Nenhum comentário ainda (loading...)
Nenhum comentário ainda (loading...)
Gostou da aula? 😆👍
Apoie nosso trabalho com uma doação: