Aula 15
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:
-
Escolha do Componente de Classe:
- O componente
PostDetail
será uma classe que se conecta ao estado da aplicação.
- O componente
-
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 umPostReducer
.
- O apresentador menciona que terá que usar um Action Creator chamado
-
Criação do Componente:
- Importações necessárias do React e React Native são feitas.
- O componente
PostDetail
é declarado extendendo deComponent
.
-
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.
-
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 oapp.js
para renderizarPostDetail
ao invés da lista.
- O próximo passo é garantir que o
-
Visualização:
- Ele confirma que, até o momento, o componente está funcionando corretamente mostrando o título e o conteúdo.
-
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: