Um momento
Aula 15
Cursos / Introdução ao Redux com o React Native
Rascunho da Página de Ver Mais Detalhes com um Componente React de Classe

Summary

Resumo do Transcript

O apresentador está discutindo a criação de um componente de classe chamado PostDetail, que será conectado ao estado da aplicação usando o Redux. Ele planeja usar a função connect para integrar os dados necessários do Redux, assim como foi feito anteriormente com um componente de lista.

Passos Principais:

  1. Escolha do Componente de Classe:

    • O componente PostDetail será uma classe que se conecta ao estado da aplicação.
  2. Uso do Redux:

    • O apresentador menciona que terá que usar um Action Creator chamado Fat Post para fazer uma requisição e obter os dados dos posts através de um PostReducer.
  3. Criação do Componente:

    • Importações necessárias do React e React Native são feitas.
    • O componente PostDetail é declarado extendendo de Component.
  4. Renderização Inicial:

    • Antes de conectar o Redux, o apresentador renderiza um layout básico com placeholders para o título e o conteúdo do post.
  5. Verificação da Função de Renderização:

    • O próximo passo é garantir que o PostDetail apareça corretamente na tela, então ele modifica o app.js para renderizar PostDetail ao invés da lista.
  6. Visualização:

    • Ele confirma que, até o momento, o componente está funcionando corretamente mostrando o título e o conteúdo.
  7. Próximos Passos:

    • O apresentador indica que agora prosseguirá para conectar o componente ao Redux.

O componente foi criado e renderizado sem problemas, e o próximo passo será a integração com o estado gerido pelo Redux.

Video Transcript

Então vou escolher o componente de classe porque a gente vai conectar os dados que vai ser necessário desse componente ao application state do Redux, então vou ter que usar aquela função chamada connect. Se você olhar aqui vai ter o título e o conteúdo, então vou ter que pegar esses dados do Redux, do mesmo jeito que a gente fez com lista aqui, quando o componente da lista montou, a gente dá um Fat Post que é um Action Creator que vai dar esse request e no final vai dar PostReducer, vai conectar o estado inicial que o estado com todos que vai ter todos os posts, do mesmo maneira a gente vai fazer isso aqui, então vamos voltar para PostDetail e começa a import, React vai ter o componente também, React, agora vamos declarar o nome do componente PostDetail, ExtendsComponent, Deriva da Component e depois export default, PostDetail, vai ter connect, do mesmo jeito que a gente tinha, se você voltar pro list, a gente vai ter que fazer a mesma coisa assim para conectar o map state to props, então eu vou voltar aqui, não vou conectar ainda, só quero fazer render do postDetail para ver se aparece na tela, então todo componente tem a função render que é definida para retornar o template e como conseguir essa apresente, essa visão ao usuário, então nesse caso a gente vai ter, vamos só pôr um view, como eu estou usando view, tem que importar, import view, destruturar do module do React Native e vai ter o título, vamos botar um texto, título do post, só botar um placeholder, só para agora e vai ter o conteúdo, está usando o texto, vamos adicionar aqui, text, salvar, está bom, agora, uma gente vai ter os detalhes expostos, a gente vai ter que obter os detalhes de algum local, então vai ser da application state da Redux Store, do Redux, como é que já vai fazer isso, deixa eu só ver se o componente vai aparecer na tela, vou colocar aqui para meu app.js e em vez de lista vou botar o postDetail, só para ver se está funcionando, aqui vou importar esse postDetail, eu estou usando o comando D, no meu caso o Mac, para selecionar as coisas ao mesmo tempo, duas coisas, postDetail, salvar, vamos ver lá para o aplicativo, vai, está funcionando, título e conteúdo, então a gente fez o componente, está tudo ok, a gente pode prosseguir para fazer, conectar ao Redux,
Nenhum comentário ainda (loading...)
Nenhum comentário ainda (loading...)
Gostou da aula? 😆👍
Apoie nosso trabalho com uma doação: