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.