Um momento
Aula 01
Cursos / O Conceito de Seletor (Selector) - React & Redux
O Conceito de Seletor - Um Exemplo (Aula React & Redux)

Summary

Resumo da Aula sobre Selectors no Redux com React

Nesta aula, o instrutor aborda o conceito de selectors no contexto do Redux com React.

Principais Pontos

  • Redux e React: O Redux é utilizado para gerenciar o estado dos aplicativos React. O pacote React Redux é normalmente utilizado para conectar os componentes React ao Redux.

  • mapStateToProps: É uma função que se utiliza com connect para injetar propriedades em um componente. Esta função possui como argumento o estado e retorna um objeto que representa as partes do estado que o componente necessita.

  • Estrutura do Estado: O estado do aplicativo pode ser dividido em subseções, cada uma relacionada a um tipo específico de dado. Por exemplo, uma subseção chamada bandas pode conter uma lista de bandas.

Exemplo de Aplicativo

  • Um aplicativo musical pode ter um estado estruturado com:
    • Perfil do Usuário: Informações como nome.
    • Lista de Bandas: Armazenada em uma subseção bandas, que contém uma array de strings representando os nomes das bandas que o usuário gosta.

Uso de Selectors

  • O conceito de selectors será introduzido na próxima aula, onde será explorado como abstrair a lógica de seleção de partes do estado.

Conclusão

O seletor é uma ferramenta essencial que será discutida na próxima aula, e é importante para otimizar a maneira como os dados do estado são acessados e gerenciados dentro dos componentes React.

Video Transcript

Olá pessoal, nesta aula eu vou falar do conceito chamado selector, selector no contexto aqui do Redux com React, tá bom? Então, quando você tem um aplicativo que está usando o React e você quer fazer a gestão do estado, né, do aplicativo, dos dados do aplicativo, nós podemos usar o Redux, né? Agora, com o Redux, normalmente, para poder conectar do React com o Redux, você usa o pacote chamado React Redux. Neste pacote tem aquela função chamada connect, né? Que a gente faz e conecta o componente com uma função aqui que a gente passa para o connect chamada mapStateToProps. Agora, essa função, se eu definir aqui mapStateToProps, ela é definida com o argumento estado, né? E retorna aqui um objeto. O que é que essa função faz? Então, ela pegar o componente e vai injetar propriedades, tá? Então, você leia aqui o mapStateToProps significa vai mapear o estado para props, então ele vai injetar como props no componente a parte do estado do aplicativo. Pode ser tudo, né, se você quiser, mas normalmente o componente não precisa ter acesso a todos os dados do aplicativo, somente uma parte. Então, por isso que a gente pode escolher aqui, quando a gente retorna, o mapStateToProps, a gente pode escolher os dados que esse componente precisa. Por exemplo, se você tem uma... Você gosta de música, tem um aplicativo que tem uma lista de bandas, né, de grupos musicais, então você pode retornar, né, que dados a gente precisa. A gente precisa da lista de bandas, então a gente pode retornar com um propriedade chamada bandas a lista, né? Agora, essa lista está armazenada onde? Está no estado state, né, que você tem acesso como parâmetro aqui do mapStateToProps, state.com alguma coisa que você quiser. Normalmente a gente divide... tem uma maneira, né, a gente dividir o estado em várias subseções e cada subseção a gente é relacionado a um certo tipo de dados. Nesse caso você tem dados relacionados a bandas, né? Então eu chamaria essa subseção de bandas e dentro dessa subseção você pode ter uma lista ou um objeto, qualquer coisa assim, nesse caso vamos fazer uma lista para se amplificar de bandas, né? Eu posso falar, sei lá como é que eu vou dizer, a lista ou pode ser até mesmo não em bandas, tá? Então como é que aparece aqui? Deixa eu ilustrar aqui. Esse aqui vai ser o estado desse aplicativo aqui, tá? Todos os dados do aplicativo. Agora, tem subseções desse estado, eu vou chamar essa subseção de bandas, poderia também, por exemplo, se você tem um perfil nesse aplicativo, você pode ter os dados relacionados ao seu perfil, né? E assim por diante, com, por exemplo, seu nome. E assim por diante. Meu nome. Agora para bandas, nessa subseção a gente poderia ter uma propriedade chamada bandas que seria uma lista de bandas, sei lá, por exemplo, as bandas que você gosta aí, lá. Tem um L e dois L, eu esqueci. Então você olha aí. Qualquer bando que você quiser, se impede diante, tá bom? Então esse seria, por exemplo, um exemplo desse estado desse aplicativo relacionado à música. Então você tem o perfil, né? Seu perfil no aplicativo, tem o seu nome e outras informações, mas também tem uma sessão, uma parte, um parte do aplicativo que você pode ver a informação relacionada a bandas. Aí tem a lista de bandas aqui. Então dentro dessa subseção do estado tem essa lista, né? Essa array de strings, vamos às bandas, tá? Então se a gente tivesse esse estado dessa maneira, normalmente você poderia, por exemplo, ao componente aqui lista de bandas, você poderia injetar como o próprio, o próprio chamado bandas que seria essa parte do estado aqui que eu estou selecionando e apareceria lá nesse componente como o próprio chamado bandas. Para acessar essa parte, o estado de gente tem que referir a state, né? ponto bandas, ponto bandas, ponto bandas, ponto bandas, tá? Então isso é o que a gente normalmente faz. Isso é o que a gente normalmente faz no map state de profs, né? Agora o que é que, quando é que vai entrar esse conceito do seletor? Então vamos dar uma pausa aqui para você, eu só queria dar introdução e um exemplo aqui e a gente vai continuar a próxima aula para introduzir esse conceito de seletor, tá bom? Então até a próxima.
Nenhum comentário ainda (loading...)
Nenhum comentário ainda (loading...)
Gostou da aula? 😆👍
Apoie nosso trabalho com uma doação: