Um momento
Aula 18
Cursos / CRUD com o Redux (e React Native)
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

  1. 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.
  2. Importação:

    • Foi feita a importação necessária do actions de react-native-router-flux.
  3. 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 usava pop para retornar a cena anterior.
  4. 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.
  5. 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: