Summary

Resumo da Aula sobre Conexão com Redux

Objetivo

Nesta aula, o objetivo é conectar a lista de bandas ao Redux utilizando o connect do React-Redux e definir a função mapStateToProps para obter os dados da lista de bandas do estado.

Passos para Conexão

Importação do Connect:
- Importar o connect do react-redux.
```
import { connect } from 'react-redux';
```
Definição da Função mapStateToProps:
- Criar uma função chamada mapStateToProps que recebe o parâmetro state.
- Retornar um objeto que injeta as propriedades com os dados do estado:
```
const mapStateToProps = (state) => {
    return {
        bandas: state.bandas.bandas
    };
};
```
Conectar o Componente:
- Usar connect para conectar a função mapStateToProps ao componente de lista de bandas:
```
export default connect(mapStateToProps)(Lista);
```

Renderização da Lista:

Dentro do componente, mapear a propriedade bandas para um elemento <li>:

return (
    <ul>
        {this.props.bandas.map(banda => (
            <li key={banda}>{banda}</li>
        ))}
    </ul>
);

Uso de Seletores

Criar um seletor que permite acessar uma parte do estado com mais facilidade, tornando o código reutilizável em outros componentes. A função seletora deve retornar diretamente o caminho dos dados:

const bandasSelector = (state) => state.bandas.bandas;

Utilizar o seletor no mapStateToProps:

const mapStateToProps = (state) => {
    return {
        bandas: bandasSelector(state)
    };
};

Conclusão

Ao finalizar a aula, a lista de bandas aparecerá corretamente na aplicação. O uso de seletores facilita a manutenção do código e a reutilização em diferentes componentes. Na próxima aula, será discutido como mover os seletores para um arquivo separado.

Esta aula termina aqui. Até a próxima!

Video Transcript

Vamos continuar a esta aula, vamos conectar a lista de bandas ao Redux através do Connect, que vem do ReactRedux, e vamos definir o nosso map, StateToProps, para poder obter aqueles dados da lista de bandas do nosso estado. Vamos lá primeiro para poder conectar este componente ao Redux, e vamos usar aqui o componente. Que função? Connect. Você vai chamar Connect, agora o Connect você tem que passar o quê? Primeiro, você chama o Connect e passa uma função chamada mapStateToProps. Você pode definir aqui, ou pode definir fora. Eu vou definir fora, aqui fora, mapStateToProps. Esta função tem um parâmetro State, e você vai retornar um objeto que vai ser usado para mapear, injetar propriedades com valores que vem do estado do aplicativo. Agora, quando você chama o Connect, ele vai retornar uma função que você vai ter que chamar com o argumento componente, por isso que tem que botar os parâmetros aqui. Então, chama este cara, pega uma função, pega aquela função, chama com argumento, lista, o componente de lista de bandas. Agora, como a gente está usando o Connect, a gente precisa o quê? Importar. Então, vamos lá em cima, vou dar o import, olha a chave, não esqueça, connect, não, de quem? Do reactRedux. Do reactRedux. Com isso, a gente vai conectar este cara ao Redux. Pronto, deu certo, não teve nenhum eu, mas não tem nada para ver. Então, para poder ver as coisas, estamos aqui no liste de bandas, fazer o L, another list, lista senhora, vou botar o li com o nome da banda. Agora, a gente vai prazer mapear este cara aqui da lista que vai vir do estado. Agora, vamos pegar este cara da onde? Vamos aqui. Então, vamos supor que o componente de lista de bandas recebe como props, propiedade, a lista de bandas. Então, o Redux.props.bandas, vou chamar a lista de progredo de bandas. Agora, vou mapear este cara para um componente li, map, banda, e vou retornar um li com banda. Banda é uma variável que vai ter o nome da banda. Se lembra que se você for lá no Reduxes.js, tem uma array, esse cara que a gente vai injetar como prop, e cada elemento é um string. Então, este cara aqui que vai ser a mais da variável, banda, que vai aparecer dentro de uma li, com aquele ponto, lista de pontos, balas. Então, a gente vai... A gente ainda não... Vai receber, mas ainda não tem como receber. Se você tentar salvar, ele vai dar erro, dizendo que o des.props.bandas está indefinido, porque a gente não injetou. Então, vamos injetar aqui. Volta lá para o ato. Então, para injetar, a gente vai no map state to props, retorna, então o nome da propiedade bandas. A gente tem que dizer de onde é que este cara vem. Ele vai vir do state.q.bandas.q.bandas, se lembra? Vamos ver aqui de novo, Reduxes. Esse aqui é o que vai ser o estado inicial, então o Reduxes vai ter bandas, state.bandas, ponto bandas para chegar até aqui, esse é o caminho. Então, o caminho state.bandas.bandas. Tá bom, vamos salvar. Apareceu a lista, RedHod e IronMade, está lá. Tá bom? E você pode escrever as bandas se você gosta, tá? Da igual. Agora, como é que a gente vai fazer isso com o seletor? Então, vamos fazer o seguinte, olha aqui. Vou pegar aqui, vou fazer a mesma coisa que a gente falou, antes bandas seletor, fazer essa variável que vai se armazenar a função. Tem comparamento state e você retorna simplesmente aquilo que você digitou aqui. Vou recortar, colar aqui. Aí, se você quiser acessar essa parte, esse pedaço do estado, é só chamar o bandas seletor e passar o estado aqui, que ele vai te retornar esse caminho. Então, vamos chamar aqui bandas seletor com o state, é só isso. E vai funcionar da mesma maneira, tá? Agora, o que é legal é, a gente vai ver na próxima aula, a gente pode reutilizar esse seletor e em vários outros componentes. E quando a gente quiser mudar o caminho, a gente não vai precisar mudar esse código aqui em cada componente, a gente só vai mudar o código do seletor, que a gente vai pegar e tirar dessa arquivo, botar em outro arquivo para poder de seletores, tá? Esse arquivo poderia ser importado por vários componentes, tá bom? Então, por essa aula é só e até a próxima.

Comentários

Nenhum comentário ainda (loading...)

From YouTube

Nenhum comentário ainda (loading...)

Gostou da aula? 😆👍

Apoie nosso trabalho com uma doação:

Quero contribuir