anteriorpróximo
Aula 12
Cursos / Introdução ao Redux com o React Native
Carregamento da Lista com o Criador de Ação e Componente Individual para Cada Item

Summary

Resumo da Transcrição

Na transcrição, o autor descreve o processo de atualização e renderização de um componente de lista em uma aplicação React. Aqui estão os pontos principais:

  1. Inicialização e Carregamento:

    • Ao iniciar, o estado do componente Post não está definido, resultando em uma tela de carregamento.
    • O componente FatPost é exibido enquanto os dados estão sendo carregados.

  2. Atualização do Estado:

    • Quando os dados são recebidos, o estado da aplicação é atualizado, definindo o Post.
    • Isso faz com que o componente seja re-renderizado, agora com Post definido.

  3. Renderização da Lista:

    • O autor passa as informações dos itens do Post para o componente List Item através de props.
    • Um map é utilizado para percorrer os objetos do Post e renderizar um List Item para cada um.

  4. Propriedades Únicas:

    • Um aviso sobre a necessidade de uma chave única (key) é mencionado. O autor sugere usar Post.id para isso.

  5. Exibição de Títulos:

    • No componente List Item, o título de cada post é exibido.

  6. Desestruturação:

    • O autor explica como melhorar a legibilidade do código através da desestruturação de props, simplificando o acesso às propriedades dos itens.

Dicas Gerais:

  • Sempre que utilizar map para criar componentes, não esqueça de incluir uma chave única para cada elemento.
  • A desestruturação é uma prática recomendada para tornar seu código mais claro e conciso.

Estrutura do Componente:

const List = (props) => {
    if (!props.Post) {
        return <Loading />;
    }
    
    return (
        <div>
            {props.Post.map((item) => (
                <ListItem key={item.id} item={item} />
            ))}
        </div>
    );
};

const ListItem = ({ item }) => {
    return <div>{item.title}</div>;
};

Conclusão

O autor faz uma revisão sobre o fluxo de dados em um componente React, enfatizando a importância da estruturação correta dos componentes e a desestruturação de propriedades para melhor legibilidade.

Scroll down above for more

Video Transcript

Ah, eu esqueci de salvar a PostReducer. Salva, tá bom? Salvei. E volto aqui. Loading apareceu os itens. Bom, então, voltando no list. Inicialmente, aparece Loading por quê? Porque inicialmente, propriedade Post não está definida, tá bom? Se não está definida, retorna em Loading. Aí, enquanto não está definida, deixa o FatPost que faz o vídeo da KTP. E quando a resposta vem, ela dá um update no State, Application State. E por isso, o Post é injetado como props no componente e se torna definido. E o cara vira, dá uma força, o componente a se renderizar novamente, que retorna esse view. Se você notar o console log que a gente deu, vamos ver que aparece. Se você notar o objeto, ao console log. Essa aqui é as props desse componente. Tem o FatPost que a gente já tinha injetado como props. E tem o Post agora, que agora é um array com vários objetos. Legal. A gente pode usar essa Post para mandar informação para cada item. Vamos lá. Então, List Item, que a gente fica a fazer é passar a informação dos items como propriedade. Nesse caso, eu só me importo com o título, mas eu posso também passar o body, ou posso passar o objeto inteiro. Vamos passar o objeto inteiro. Então, vou colocar item e quero que a gente tenha que dar um map. Tem que ir para cada um, para cada um desses objetos. A gente vai fazer um componente List Item e passar essas informações para componente via props. Vamos lá. Eu vou voltar aqui. Se não estiver definido, chama load. Se estiver definido, eu vou... Eu vou deixar o console log ali, ou não, sei lá, tirar aqui. Eu vou fazer... Post. Vou chamar Post. Vou chamar Post. Vou chamar Post. Item, sei lá, vou chamar assim. Então, o que eu vou fazer? Vou dar... Eu tenho acesso a props. Post. Um lista de objetos. Eu vou dar um map. Tá bom? Primeiro argumento vai ser o Post. E vou passar usando Flash. E para cada post, vou retornar um List Item. Um item, propriedade de item, seja o Post. Tá bom? E aqui, em vez de ter esses caras, eu vou só por Post Items. O que eu estou fazendo? Para cada Post, dentro dessa array, eu retorno um componente List Item, cuja propriedade item é setada pela informação do Post, objeto do Post. Então, o List Item vai ter acesso ao item. Tá bom? Então, pego todo esse list de componentes e mostro na tela. Vamos ver se não teve erro. Aí, aparece um monte, porque acho que tem um 100. Um 100 Post aqui, né? Se até o final, 100. Então, tem muitos deles. E tá também esse error, esse warning aqui. Não é erro, não. É só dizendo, todo filho de um array tem que ter uma key propriedade única. Então, esse negócio da... tem que sempre ir adicionar o key aqui. Quando estiver fazendo mapping ou gerando vários componentes, uma lista, ponho key. Eu vou botar o Post.id, porque eu sei que é único, né? Unique. Tá bom? Vou botar Post.id, que é único para cada um. Tem que ser único. Vamos ver se não dá mais esse warning. Tudo ok agora. Tá aí, tudo aí. Tem vários dias, a gente vai lidar com isso depois de tanto item. Mas, vamos ver. Depois disso, vamos configurar List Item. Cadê o List Item? Aqui. Para usar as propriedades. Bom, em vez de falar item, eu vou falar props.item.title.tyre. Porque eu sei do JSON aqui que tem um Tyre, né? Tem também esse body. Mas vamos olhar aqui. Então, eu dei um update no List Item para mostrar o título. Tá bom. Tá tudo isso agora. Então, cada um, cada linha é um título, né? Então, vamos recapitular essa para você entender. Estou aqui no componente List. Então, os posts vão vir do estado, que são injetados via prop. Enquanto não estiverem definidos, retorne o texto. Se estiverem definidos, faz isso aqui. Vai dar um loop, mapping, cada post gera um componente List Item para cada post e cria uma nova array de componentes. Tem que setar o key para uma coisa única. Nesse caso, post.id, eu sei que é único. E eu dei, injectei a propriedade chamada item para o List Item, que tem a informação do post, um objeto. E dentro do List Item, eu pego, tenho esses props, né? .item que foi injetado e ponho o título, ponto título. E tá aqui. Tá bom? Normalmente, para essas suas do sim, por exemplo, se você sabe já que só vai ter o título e não precisa mais de nenhuma outra informação, você pode dar um destructuring no argumento aqui. Em vez de falar props, eu vou destruturar o item. Só o item. E aqui, eu não preciso mais falar props, que já tem o item. Tá bom? E pode destruturar mais ainda, sim. Fazendo assim. E não precisa mais falar item. Tá bom? Pode fazer isso também. Vamos ver se está funcionando. Ainda, testar. Estar. Loading. Tá aí. Tá bom? São os detalhes do IACs, que a gente usa muito para digitar muita coisa depois. Mesma coisa, a mesma maneira eu poderia fazer no List aqui. Eu tô usando Post. Post duas vezes, né? É que eu faço destructuring. Faço Post, destes pontos props. Em vez de falar destes pontos props, eu vou só falar Post. Tá bom?
See more
Nenhum comentário ainda (loading...)
Nenhum comentário ainda (loading...)
Gostou da aula? 😆👍
Apoie nosso trabalho com uma doação:
Quero contribuir