Aprenda o conceito de Selector (seletor) no Redux. Demonstração de como criar seletores para acessar o estado do aplicativo com React e Redux. Tópico relacionado ao react-redux, connect, mapStateToProps, reselect.

O Conceito de Seletor (Selector) - React & Redux

O Conceito de Seletor (Selector) - Aula de React & Redux

O Conceito de Seletor - Um Exemplo (Aula React & Redux)

# 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.

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.


0013-01 O Conceito de Seletor - Um Exemplo (Aula React & Redux)

A Explicação (Aula React & Redux)

```markdown
# Resumo do Conceito de Seletor no Redux

Nesta explicação, discutimos o conceito de _seletores_ no Redux, focando em como facilitar o acesso ao estado e melhorar a manutenção do código.

## Estrutura do Estado
- O estado possui sub-seções como `bandas` e `perfil`.
- A sub-seção `bandas` contém uma lista de bandas (array de strings).

## Problema Sem Seletor
- Para acessar a lista de bandas, é necessário usar `state.bandas.bandas`.
- Se o caminho mudar (por exemplo, para `grupos musicais`), todos os componentes que acessam essa parte do estado precisariam ser atualizados manualmente.

## Vantagens dos Seletores
1. **Isolamento de Mudanças**: Com um seletor, se o caminho do estado mudar, só precisamos atualizar o seletor uma vez, e todos os componentes que o utilizam não precisam ser alterados.
2. **Reutilização**: Seletores podem ser usados para criar seletores derivados, permitindo a composição de seletores.

## Implementação do Seletor
- Definimos uma função chamada `bandaSelector`, que recebe o estado (`state`) e retorna `state.bandas.bandas`.
- Para usar o seletor em componentes, substituímos a chamada direta ao estado pela chamada ao seletor, como `bandaSelector(state)`.

## Conclusão
- Utilizando seletores, o código torna-se mais limpo e fácil de manter. 
- Será criada uma aplicação de exemplo para implementação prática dos seletores.

## Encerramento
- A aula foi concluída e será prosseguida na próxima sessão com a implementação prática.
```

Então vamos continuar aqui para a explicação desse conceito de seletor no redux.
A gente já falou que a gente tem esse estado aqui com subcessão BANAS, subcessão perfil
e na subcessão do estado aqui tem BANAS, subcessão BANAS tem uma lista de BANAS, né?
Para poder acessar esse cara aqui, sei lá, array de strings, a gente precisa lá no maps
state props que a gente passa para o primeiro argumento do connect que vem do reactredux
para poder injetar como prop bandas, esse pedaço aqui do estado, tem que fazer assim
state.bandas.bandas, né? Agora, essa parte aqui, por exemplo, se você quiser toda vez que
você tem um componente que tem que acessar essa parte do estado, você tem que escrever assim.
Agora, o que acontece se essa parte do estado aqui tivesse mudado?
Talvez tivesse mudado porque a propriedade mudou para ser lista, o nome mudou?
Dessa maneira, a gente teria que mudar todos os componentes que se referiu a bandas,
bandas, ponto bandas, a gente teria que mudar para quê? Para a lista. Então, a gente daria muito trabalho
para você encontrar todos os componentes e mudar para esse cara, né?
Obviamente você pode fazer uma busca global e tentar substituir tudo, mas normalmente não seria legal.
O que aconteceria, sei lá, não só isso, mas também mudasse essa outra aqui, mudasse para outra coisa, sei lá,
grupos musicais, aí teria que mudar também para ponto grupos musicais, ponto listo,
em cada componente que usou esse cara, tá? Então, essa é uma das razões que a gente vai
produzir o conceito de seletor, né? Para a gente poder, quando tivesse problema, em vez de mudar
todos os componentes, a gente só ia mudar em um local, tá? Então, outra vantagem que a gente vai ver
depois de ter selectores, é que você pode reutilizar o selector para poder compor selectores derivados
desse selector. É um conceito que a gente vai ver mais na frente quando a gente usar a biblioteca
re-select, tá bom? Então, vamos voltar aqui ao que tinha antes, vamos fazer o selector.
Agora, em vez de ter esse cara explicitamente aqui, a gente vai criar o chamado, uma função, tá?
Que a gente vai chamar de selector. Então, vamos criar aqui uma função, vou definir uma variável,
vou chamar selector, tá? Agora, essa função, ela vai ter com o primeiro parâmetro, vai ser o
estado state. Agora, essa função vai retornar o state, ponto que você quiser.
Então, nesse caso, vai ser o selector de quê? A gente precisa de um selector para a lista de bandas.
Olha aqui, esse pedaço do estado. Então, vamos chamar esse cara aqui de, sei lá, selector para
bandas. Normalmente, você pode adotar um padrão de nomeação, se você quiser, tá?
Sei lá, vamos chamar a banda selector. Banda selector, por exemplo.
Então, para poder acessar essa lista, usando o selector, é só dar state, ponto bandas, ponto bandas.
Então, na verdade, é só pegar esse recortar esse cara daqui e retornar de uma função que tem
como parâmetro o state, e esse vai ser o selector, tá? A gente define esse selector, a gente pode
chamar esse selector e passar o estado, que ele vai retornar o pedaço do estado que a gente
quer, nesse caso, o sbandas. Bandas aqui, vamos voltar para bandas, tá? Então, você pode pegar e
definir esse selector em um arquivo separado. Aí, você importa se selector toda vez que você
precisa acessar essa parte do estado. Aí, quando você usar isso, vamos ver aqui. Lá no
maps state to props de cada componente que precisada a lista de bandas, em vez de falar
state,bandas,poto bandas, você vai falar o seguinte, banda selector e vai passar essa
variável aqui como argumento. Porque esse cara vai ser chamada de função, vai chamar essa função
e vai retornar esse cara aqui, que é o que a gente tinha antes. E a vantagem é que, em vez
de falar, se você tivesse mudado o caminho para essa lista, se fosse, sei lá, grupos
musicais, ponto lista, você só precisaria mudar o selector e, por causa do selector,
é usado em todos os componentes que precisarem acessar esses dados, eles não vão precisar
mudar nada porque o bando selector vai estar na mesma. Somente a implementação do selector
que muda esse valor aqui, essa expressão de retorno. Então essa é a vantagem que a gente
vai ter com o selector, tá? A primeira vantagem que a gente aprende. Tá bom? Entendeu? Aí
você pega o ponto no arquivo separado e importa para todos os componentes que precisarem acessar
de pedaço do estado e já está com propriedade bandas, tá bom? Então a gente vai, agora que
a gente termina a explicação, vamos criar um aplicativo de exemplo para poder a gente
fazer a implementação desse aqui e ver como é que realmente dá certo, tá? Então
por essa aula é só e até a próxima.


0013-02 A Explicação (Aula React & Redux)

Gerando o Projeto com create-react-app (Aula React & Redux)

# Resumo do Vídeo sobre Criar um Projeto React

No vídeo, o instrutor demonstra como criar um projeto React usando o Create React App. Aqui estão os principais pontos abordados:

1. **Preparação do Ambiente**:
   - O instrutor utiliza a versão Node.js 10.15.3 e NPM 6.4.1.
   - Ele menciona que, se você não tiver o Create React App instalado, pode fazer isso usando o comando:
     ```bash
     npm install -g create-react-app
     ```

2. **Criação do Projeto**:
   - Ele cria um novo projeto chamado "bandas" com o comando:
     ```bash
     npx create-react-app bandas
     ```

3. **Instalação de Pacotes**:
   - O instrutor navega até o diretório do projeto (`cd bandas`) e instala os pacotes `react`, `react-redux` usando:
     ```bash
     npm install react redux
     ```
   - A verificação dos pacotes instalados é feita no `package.json`, onde são confirmadas as versões de `redux` (4.0.1) e `react-redux` (7.0.2).

4. **Configuração do App**:
   - O servidor de desenvolvimento é iniciado com:
     ```bash
     npm start
     ```
   - Ele demonstra como editar o `App.js`, começando com um componente de classe que retorna um `div` com o texto "Lista de Bandas".

5. **Próximos Passos**:
   - O instrutor menciona que irá reescrever o conteúdo do `App.js` passo a passo em aulas futuras e não precisa se preocupar com os arquivos restantes neste ponto.

O vídeo é focado em demonstrar a configuração inicial de um projeto React com Redux, preparando o ambiente para desenvolvimento posterior.

Estamos de volta, agora vamos para a prática e eu abri o terminal aqui.
Eu vou usar o Create React App para gerar um projeto de React.
Rapidamente, se você não tiver, só dá o NPM.
Instala o traço G para instalar o pacote globalmente, Create, Traço React, Traço App.
Tá bom, ele já tem instalado.
Note que eu estou usando a versão Node 10.15.3 nesse vídeo.
NPM versão 641.
Já bom? Então vou dar o Create React, só digitar Create React, Traço App e o nome do projeto.
Tá?
Eu vou dizer, sei lá...
Chama de bundas.
Vou levar um tempo para instalar React, React Dom, React Scripts e gerar o projeto.
Se você quiser pular essa parte do vídeo.
Já terminou.
Gerou o projeto no diretório BANDAS.
Então vamos entrar no diretório BANDAS, CD BANDAS.
Temos aqui os arquivos já.
Agora vamos instalar os pacotes.
Vou usar o NPM Instal, React, React, Redux.
Eu estou usando o NPM 6, então não precisa digitar Tras, Tras, Save.
Agora vamos instalar os pacotes que precisamos.
Vamos instalar os pacotes que precisamos.
Vamos instalar os pacotes que precisamos.
Vamos instalar os pacotes que precisamos.
Eu estou usando o NPM 6, então não precisa digitar Tras, Tras, Save.
Também deve demorar um pouquinho se você quiser pular essa parte do vídeo.
Por favor.
Pronto, então vamos aqui abrir o projeto que eu vou abrir no meu editor de texto Atom.
A ver os arquivos.
Vou conferir se foi instalado os pacotes no package JSON.
Aqui BANDAS, Dependences, Redux, versão 4.0.1.
E acima.
React Redux, versão 7.0.2.
Eu estou usando o React 1686.
O React On é o 1686.
Na parte de SGRC, tem um app com o JTS, que é o ponto de partida para esse cara.
Para poder rodar esse cara, temos os comandos de script.
Essa é o da NPM Start para rodar.
Vamos aqui, terminar.
Da NPM Start.
Aqui dá.
Abrir uma aba aqui no meu navegador.
A D está rodando o servidor de desenvolvimento.
Pronto, compilou sucesso com esse.
Essa é a página que é gerada pelo app.js.
Vamos lá.
Vou pegar o JTS, vou deletar tudo, começar com o mesmo.
Vamos lá.
Import.
React for React, a gente vai precisar.
Vamos fazer componente de classe aqui.
App, Extend, do React.component.
Precisamos ter o método render, para retornar um modelo, uma visão.
Vou botar um div aqui.
Sem nada.
Vou dizer lista de bandas.
Na verdade, eu quero botar esse enquanto componente, mas vamos depois.
Se quiser dar o export default aqui, pode ser, mas vou dar aqui fora.
Vamos ver se aparece.
Lista de bandas.
Vou pegar aqui.
Fazer assim.
Para você ver no lado esquerdo o aplicativo Lista de Bandas.
A gente vai escrever o código aqui, essa parte, lá direito.
Vamos dar a pausa aqui, para você ver se já gerou o projeto.
E instalar o Redux, o React Redux.
Tem um app aqui que a gente apagou.
Vamos escrever tudo zero de novo.
Não precisa se preocupar com os outros arquivos, a gente vai ilustrar o conceito de ser letor nos próximos aulas.
Tem por essa aula é só e até a próxima.


0013-03 Gerando o Projeto com create-react-app (Aula React & Redux)

Configurando Boilerplate do Redux (Aula React & Redux)

```markdown
# Resumo da Configuração do Redux

Neste transcript, o autor mostra como configurar o Redux em um aplicativo React. Aqui estão os principais passos abordados:

1. **Inicialização do Projeto**:
   - O arquivo principal `index.js` do diretório `src` é utilizado para renderizar o aplicativo.

2. **Uso do Provider**:
   - O `Provider` do React Redux é importado e utilizado para embrulhar o componente `App`, permitindo que todos os componentes acessem a store do Redux.

3. **Criação da Store**:
   - O autor importa a função `createStore` do pacote Redux e a utiliza para criar uma store, que é armazenada em uma variável chamada `store`.
   - Um `rootReducer` é definido, importado de um arquivo chamado `reducers.js`.

4. **Definição do Reducer**:
   - O `rootReducer` é uma função que recebe `state` e `action`, inicialmente definindo um estado inicial.
   - O estado contém duas propriedades: `bandas` e `perfil`, onde `bandas` é uma lista de strings e `perfil` possui informações sobre o usuário.

5. **Preparação do Componente de Lista de Bandas**:
   - No arquivo `App.js`, é criado um componente para a lista de bandas, que será conectado ao Redux mais tarde utilizando a função `connect`.
   - Um novo arquivo `ListaDeBandas.js` é criado para definir este componente, que extende `React.Component` e possui um método `render`.

6. **Conexão com o Redux**:
   - O autor menciona que irá conectar o componente ao Redux utilizando `mapStateToProps`, mas isso será abordado em uma próxima aula.

**Conclusão**:
O transcript detalha a instalação e configuração básica do Redux em um aplicativo React, incluindo a criação da store e a definição do reducer. A conexão do componente ao Redux será realizada em uma etapa futura.

```


Estamos de volta, vamos configurar o Redux aqui.
Temos o arquivo index.js no site do diretor, o S-R-C.
Nós temos aqui o React DOM chamada da função render.
Aqui tem um app, né?
A gente vai fazer o seguinte, a gente vai usar o provider do React Redux para poder
embrulhar aqui no componente app, tá?
Vai ser embrulhado pelo provider que vem do React Redux.
Agora esse provider leva como o próprio store, que a gente vai criar ali, tá bom?
Então vamos importar aqui o provider.
Provider...
Redux.
Agora, só a gente tem que criar com o pacote do Redux, tá?
Então vamos aqui...
A gente vai chamar o Create Store.
Essa é a função que está dentro do pacote Redux, tá bom?
Vamos importar o Create Store...
Pro Redux, tá?
Agora o Create Store, e você precisa definir o reducer, passa o reducer para o Create Store.
Então vamos pôs caras em uma variável store, vai ser usada aqui.
A gente tem que ter o reducer ou o root reducer, tá bom?
Vou chamar de root reducer.
Então vou importar root reducer, vou chamar ponto reducers.
Ponto barra reducers, um arquivo que eu vou criar aqui, reducers.js.
Vou dar export default dentro desse cara para poder portar.
E vou só deixar uma função mesmo, tá?
Essa função aqui vai ter o State e o Action.
Tá bom? Então root reducer, o State vai ter um estado inicial.
Vou chamar nesse State e vou definir o variável aqui.
Agora não tem nenhuma ação, né?
Não dá para fazer nada, então eu vou retornar o Estado como ele é sem fazer nada, tá?
Então vamos ver o que aconteceu aqui.
Então aqui no index.js da parte de SRC, nós temos a renderização do...
A indigestão do aplicativo no elemento pro id root do index, né?
Ponto HTML aqui, na parte da public, o aplicativo será injetado aqui
na CDV com id root, tá?
Então isso significa essa chamada pro render, vai injetar lá naquele elemento
de esse cara aqui. Então a gente embrulhou o app com o provider.
Provider que vem do pacote React Redux para a gente poder conectar
e disponibilizar essa store aqui em todos os componentes
aqui do nosso aplicativo.
Esse caso vai começar pelo app.
Então para poder... como é que define essa store?
Então eu pregamos variável chamado store e fiz a chamada do create store
uma função do pacote Redux e você tem que passar o reducer, né?
A definição dos seus reducers.
Nesse caso eu fiz um arquivo ponto bar reducers e eu defini o reducer,
que é uma função, né?
Aqui tem o parameter state e o segundo parameter action, né?
A...
expect a reducer a function.
Eu erro aqui.
Deixa eu salvar esse arquivo.
Tá?
Então eu não vou fazer muita coisa aqui para poder dividir o reducer
em sub reducers e pedaços do estado, tá?
Se você quiser fazer isso, você pode usar o combine reducers.
Como a gente só quer ilustrar o conceito de selector,
eu não vou perder tempo lidando com ações aqui
e dividindo o reducer em múltiplos.
Outros reducers, tá bom?
Então o que é que eu vou fazer?
Eu só vou definir o estado inicial aqui.
Vai ser o state, vai ser inicialmente indefinido,
mas ele vai adotar como o valor inicial,
essa variável initial state que eu vou definir aqui,
eu já vou definir com aquilo que a gente já tinha antes
e a gente já tinha falado, tá?
Então eu vou copiar e colar essa parte aqui que a gente já falou.
Tá bom?
É um objeto, propriedade bandas, propriedade perfil dentro de bandas.
Tem outra propriedade bandas com uma lista de strings
e para o perfil tem uma propriedade nome com meu nome
e vários outros que a gente pode ter.
Esse vai ser o estado inicial já assim mesmo.
Finalmente, o aplicativos precisam fazer pedidos de HTTP
para poder obter todas essas informações.
Aqui eu já estou pondo aqui em...
Só para ilustrar o exemplo, tá?
Para o ministrado já ter um estado aqui definido
para a gente poder ver como é que criou o selector.
Tá?
Então esse é o estado inicial, propriedade bandas.
Outro bandas que a gente vai ver aqui, tá?
Agora, a gente tem isso.
Agora vamos aqui no app, o JTS.
Vamos pegar essa aqui...
Lista de bandas e vamos definir um componente próprio.
Se eu vou pegar esse cara, vou copiar
e vou só dizer que esse aqui é o app.
E dentro do app, vou...
Vou colocar a lista de bandas.
Vou colocar o app, vou colocar o app.
Dentro do app, vou colocar lista de bandas, tá?
Esse componente a gente vai definir aqui.
Vamos importar a lista de bandas.
Vou definir ponto bar, lista de bandas, tá?
Vou criar a lista de bandas, ponto JTS.
Mesma coisa, componente clássico, vou criar lista de bandas, tá?
Extends react.component.
Opa, react a gente tem que importar
pra usar.
Preciso do que método nessa classe.
Ranger.
E vou retornar, né?
Esse cara aqui, tá?
Pô, uns...
Tá, e vou dar lá no final export default
lista de bandas
pra poder disponibilizar esse cara lá
pra poder ser importado lá do app.
Tá? Então tá aqui no lado esquerdo, parece.
Agora, o que a gente vai fazer?
A gente vai conectar esse componente ao Redux
através do connect, do react Redux.
E a gente vai fazer o nosso map, state to props.
Primeiro, vamos fazer sem seletor.
Depois, a gente vai criar o seletor, tá bom?
Então, vamos deixar isso pra próxima aula.
Então, até mais.


0013-04 Configurando Boilerplate do Redux (Aula React & Redux)

Conectando com connect, mapStateToProps (Aula React & Redux)

# 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

1. **Importação do Connect**: 
   - Importar o `connect` do `react-redux`.

   ```javascript
   import { connect } from 'react-redux';
   ```

2. **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:

   ```javascript
   const mapStateToProps = (state) => {
       return {
           bandas: state.bandas.bandas
       };
   };
   ```

3. **Conectar o Componente**:
   - Usar `connect` para conectar a função `mapStateToProps` ao componente de lista de bandas:

   ```javascript
   export default connect(mapStateToProps)(Lista);
   ```

4. **Renderização da Lista**:
   - Dentro do componente, mapear a propriedade `bandas` para um elemento `<li>`:

   ```javascript
   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:

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

- Utilizar o seletor no `mapStateToProps`:

```javascript
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!

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.


0013-05 Conectando com connect, mapStateToProps (Aula React & Redux)

Pagina para o Perfil (Aula React & Redux)

# Resumo do Transcrito

Neste trecho, o apresentador fala sobre o aprendizado do conceito de seletores em um projeto de React. Ele realiza as seguintes etapas:

1. **Criação de um novo arquivo de seletores**:
   - O apresentador recorta o seletor existente e o cola em um novo arquivo chamado `seletores.js`.
   - Adiciona a palavra-chave `export` para tornar o seletor disponível para importação em outros arquivos.

2. **Importação do seletor em outro componente**:
   - No componente que lista bandas, ele demonstra como importar o seletor utilizando a sintaxe correta (incluir chaves).

3. **Lidando com Warnings**:
   - O apresentador menciona um erro de 'warning' que ocorre quando cada item de uma lista não possui uma chave única. Ele sugere que se adicione uma chave única a cada elemento listando o nome da banda.

4. **Criação de um componente de perfil**:
   - Implanta um novo componente chamado `perfil.js`, criando um método `render` simples para exibir um elemento `div` com o texto "perfil".
   - Explica como configurar uma rota para acessar o componente de perfil, utilizando `window.location.pathname` para determinar qual componente mostrar.

5. **Implementação de navegação entre componentes**:
   - Ele descreve como alternar entre a lista de bandas e o perfil baseado na rota atual, e menciona a importância de importar o componente de perfil.

6. **Adicionando links de navegação**:
   - O apresentador sugere a adição de links de navegação que redirecionam para o componente de perfil e a lista de bandas. Ele também menciona a importância de evitar recarregar a página ao clicar nos links.

7. **Gerenciamento de bandas favoritas**:
   - Indica a necessidade de armazenar as bandas favoritas, sugerindo o uso de um estado que poderia ter uma estrutura mais normalizada, idealmente usando IDs e evitando duplicação de informações.

8. **Encerramento**:
   - O apresentador solicita uma pausa na explicação, indicando que continuarão a trabalhar no armazenamento e filtragem das bandas favoritas em uma próxima aula.

---

Essa estrutura resume claramente os principais pontos abordados no vídeo, focando na técnica de modularização e organização em React, a importância da navegação entre componentes, e o gerenciamento de estado.


Então, vamos continuar aqui o nosso aprendizado do conceito de seletor.
O que eu vou fazer agora?
Então vamos pegar esse arquivo aqui, vamos pegar esse seletor e vamos recortar e colar
em outro arquivo.
Vamos criar um arquivo a pasta sse, chamado seletores.js.
E nesse arquivo eu vou cortar aqui, vou colar aqui nos seletores.
Agora se você quiser importar o seletor desse arquivo, você precisa botar export
contra aqui antes do const.
Aí, lá do listro de bandas, o banda seletor tem que ser importado do outro arquivo.
Em cima import, como é que é?
Tem que ter a chave que a gente usou export const, não se esqueça da chave.
Bandas seletor, tron.ba seletores, tá?
Salvar, sem problema.
Deixa eu voltar aqui no navegador e eu vou abrir com a console, tá?
Tem um erro aqui, deixa o pulse car aí embaixo.
Tá bom, então esse erro aqui, warning each child, cada criança na lista tem que ter
uma propriedade que única, tá?
Isso é porque eu fiz o map e esqueci de pôr aqui no li, tá?
Fiz o map, tem que ter aqui, eu vou botar só o nome da banda.
Tem que ser um coisa única que vai ser diferente para cada elemento ali, tá?
Normalmente é o id do dado, né?
Dos dados.
Então, só fazer isso para não ter mais o warning.
É certo aqui, então, que isso vamos continuar aqui.
Então, gente, o que é que a gente fez?
Nós recortamos o seletor e fizemos arquivos de seletores e exportamos o seletor.
Dessa maneira, a gente pode usar esse seletor de qualquer arquivo, de qualquer componente.
Nesse caso, eu peguei o seletor e importei lá em cima dessa maneira.
Agora, vamos supor que a gente tem outra, outra sessão do seu aplicativo, né?
Se tem o seu perfil, por exemplo, aí a gente quer ver suas bandas favoritas, né?
No seu perfil, sua página.
Então, vamos criar aqui a página do perfil, vou criar o componente perfil.js, vou fazer
aquela mesma coisa.
Class, perfil, componente class, extends, react component, tá?
Tem um método render e vou retornar, tá?
Vamos fazer uma div, botar perfil, só por enquanto, pra gente poder mudar o export
default lá embaixo.
Perfil, import, react, um react, tá bom?
Vamos ver aqui como é que a gente vai fazer pra poder mostrar esse cara no aplicativo.
Vamos pôr uma rota, tá bom?
Essa rota vai ser barra perfil aqui, quando você for aqui no seu localhost 3000, barra
perfil, a gente quer ir e mostrar o componente perfil em vez dessa lista de bandas, tá?
Agora tem a lista de bandas.
Então, vamos ver aqui.
Como é que a gente vai fazer?
Então, vamos voltar aqui no app.
Agora só tem a lista de bandas.
A lista de bandas tá legal, mas eu não quero mostrar se o caminho for barra perfil.
Como é que a gente vai detectar esse caminho?
Você pode olhar no objeto window.location, tá?
Esse objeto aqui, vamos dizer informação em seu local.
O que a gente quer é o barra perfil, que vai estar nessa propriedade chamada pathname.
Então, se o window.location.pathname for perfil, a gente vai mostrar o perfil, componente
perfil, senão a gente vai mostrar a componente lista de bandas, tá?
Então, vamos ver aqui.
Eu vou aqui fazer o seguinte.
Então, window.location.pathname, se for igual a barra perfil, eu quero mostrar o que?
O perfil, né?
O componente perfil.
Vou botar esse perador aqui pra gente...
Se esse cara aqui for verdadeiro, ele vai retornar esse cara aqui, tá?
E vai aparecer aqui.
Senão, né?
Ele vai mostrar a lista de bandas.
Mas pra botar o si não, eu teria que fazer o seguinte, botar o interrolação aqui.
Então, em vez de botar esse cara, na verdade, vou botar a interrolação pra se der valor
false, se ele não tiver em barra perfil, ele vai mostrar a lista de bandas, tá?
Então, deixa eu salvar.
Ah, o perfil não está importado, tem que me importar aqui em cima.
Perfil, tá?
Não esqueça de importar.
Porto perfil.pron.barra.perfil, tá?
Então, apareceu aqui, olha aqui.
Se eu tirar barra perfil, ele vai de volta pro list de bandas, tá?
Então, rotiamento aí.
Se quiser adicionar um link, vamos ver adicionar o link ali lá em cima.
Um app, e o app, fazer, sei lá, um menu, né?
Pode botar um link aqui, h.etv.barre.perfil.
Ver perfil, vamos ver se funciona.
Ele vai pra perfil mesmo, tá?
Fazer outro link.
Eu acho que está dando um reload.
A gente não quer, a gente tem que dar o prevment default.
Toda vez que a gente clica, esse cara, mas eu não quero fazer isso,
deixe como é, se você quiser fazer, tá?
Vou botar o ahref, vai ser...
Vista de bandas, se você quiser.
Está muito feio esse negócio.
Vou botar dentro do app.
E...
Botar outro div.
Vou botar aqui a...
Vou botar um div aqui pra ficar...
Botar uma...
H.
Tá bom.
Vou botar um aqui.
Botar a H.6.
Eu não vou mudar perfil, não vou mudar os títulos, se você quiser fazer isso.
Perder tempo com os títulos, porque a gente quer focar no conceito.
Tá bom, então.
De bandas.
Tudo certo, agora.
Então vamos supor que o seu perfil, né?
Você quer mostrar a lista de bandas favoritas.
Então a primeira coisa que a gente vai fazer, a gente precisa acessar, né?
A gente... Vamos... Vamos ver aqui no reducer.
Aqui, o perfil aqui.
A gente vai precisar armazenar as suas bandas favoritas no seu perfil.
Então vamos supor que as suas bandas favoritas estivessem aqui nessa...
Nessa parte do estado.
No caminho é state.perfil.
Vamos dizer assim, bandas favoritas, tá?
Aí você pode, por exemplo, ter uma...
Sei lá, uma lista com o nome das bandas que você gosta.
Por exemplo, só gosto dessa aqui.
Então vamos adicionar outra banda aqui.
Sei lá...
Qualquer banda aí.
Tá legião, mano.
Então adicionar um novo banda aqui, então tem três.
Então vamos dizer que só gosto de uma.
Então a gente vai precisar de um tipo de filtrar, né?
Essa maneira que a gente fez...
Normalmente a gente não se refere aos dados...
Em maneira duplicada aqui, que já tem...
As bandas já tem o nome aqui, então eu não quero duplicar os dados aqui.
Normalmente teria um ID associado a essa banda.
Esse cara normalmente seria um objeto, né?
Com um ID, sei lá, dois, três, o nome da banda.
Aí você poderia normalizar o estado em vez de ter o nome aqui.
Você só diz o ID da banda, os favoritos que você gosta, tá?
Dessa maneira aqui.
Então vamos deixar essa maneira, na verdade,
porque a gente tem que filtrar as bandas que a gente gosta e pegar o nome.
Então seria melhor para ilustrar o nosso exemplo e fazer dessa maneira aqui.
Então vamos dar uma pausa aqui e continuar na próxima aula para fazer isso, tá?
Então te vejo lá. Até mais.


0013-06 Pagina para o Perfil (Aula React & Redux)

Normalização do Estado (Aula React & Redux)

# Resumo da Aula sobre Normalização de Dados com Redux

Na aula, discutimos a importância de modificar a estrutura do estado no Redux para refletir mais adequadamente a realidade dos aplicativos em produção. A abordagem correta é armazenar os dados de forma **normalizada**, indexando-os pelo ID de cada registro para evitar duplicação e manter a **completa fonte da verdade**.

## Estrutura do Estado

1. **Objetos Normalizados**:
   - Cada banda é representada como um objeto indexado pelo seu ID:
     - Exemplo:
       - ID 181: `{ id: 181, name: "Legião Urbana" }`
       - ID 122: `{ id: 122, name: "Red Hot" }`
       - ID 123: `{ id: 123, name: "Iron Maiden" }`

2. **Lista Ordenada**:
   - Além dos objetos, mantemos uma lista que contém apenas os IDs das bandas na ordem desejada:
     - Exemplo:
       - `lista: [121, 122, 123]` (pode ser alterada para reordenar as bandas)

## Conceitos Chave

- **Normalização do Estado**:
  - Pensar no estado como um banco de dados, onde cada registro tem uma chave primária (ID).
  - Permite acesso eficiente aos dados sem duplicação, mantendo a fonte única da verdade.

- **Seletor Modificado**:
  - O seletor agora precisa mapear a lista de IDs para os objetos correspondentes no hash, utilizando:
    ```javascript
    return bandasHash[bandaId];
    ```
  
## Importância da Normalização

A normalização é crucial para evitar conflitos e problemas de sincronização nos dados do aplicativo. Armazenar apenas os IDs nas listas garante que qualquer alteração nos objetos seja refletida em todas as partes do aplicativo, mantendo consistência.

---

A aula concluiu enfatizando a implementação correta dessa estrutura de dados e a importância de modificar o seletor para que ele funcione conforme a nova normalização. O conceito de usar IDs em listas e manter um hash de objetos permite uma organização mais robusta e eficiente dos dados.

Atenção, nessa aula nós vamos modificar o nosso estado, o formato, a estrutura, tá certo?
Para poder refletir melhor o estado de aplicativos e produção, que normalmente quando você tem esses dados,
a gente armazena o Redux de maneira normalizada, tá?
Indexado pelo ID do recorde.
E quando a gente precisar se referir a cada pedaço de informação, por exemplo, a cada banda,
cada banda é um objeto.
E se o objeto tem um ID, quando você tem as bandas favoritas, você não vai duplicar o dado e armazenar
aquele mesmo objeto da banda no seu perfil aqui, ó.
Isso não é bom ter dados duplicados, porque aí não vai ter mais o single source of truth,
que é o único, como é que fala, o único fonte da verdade, né?
Por isso que a gente sempre, se você se referir a outro recorde, outro recurso, você usa o ID
em vez do objeto, tá?
Então vamos mudar aqui esse cara.
Então vai ser o seguinte.
O bandas não vai ser mais o list aqui, ele vai ser um objeto.
Mas vamos fazer dessa maneira aqui, olha.
Então o objeto vai ser indexado pelo ID da banda.
Vamos dar um ID para cada banda, tá?
181 vai ser o legião urbano, que vai ser um objeto.
O ID 121, opa.
E o nome aqui, legião urbano.
Vai ser dessa maneira aqui.
Então temos um objeto, tá?
Indexado pelo ID da banda, do objeto.
E temos objetos com várias propriedades relacionadas à banda 121,
por que o ID você sempre vê que é o mesmo do index aqui, do índice.
E o nome, etc.
Então vai ser a mesma coisa para os outros, tá?
Então vamos duplicar, mudar o ID para 122,
por exemplo, para Red Hot aqui.
123, Fire Maiden.
Aí eu vou tirar esses caras.
Tá, então temos 121, 122, 123.
Isso aqui se chama normalização do estado, tá?
É um outro conceito, não vou falar em muitos detalhes,
mas chamada normalização do estado.
Você perde pensar no estado do Redux também como banco de dados.
Da mesma maneira que você vai armazenar os records no banco de dados,
e tem a primary key, chave principal,
você vai usar a primary key aqui para indexar esses records.
Eu penso em cada um desses caras como se fosse uma linha,
um bro no banco de dados, na tabela.
Aí você pega esse cara aqui, agora tem um problema que a gente fez,
deixa eu comentar esse cara aqui,
eu tenho problema agora, aquela lista que a gente vai ter não vai funcionar mais.
Vai que está quebrada, se eu clicar na lista de bandas vai estar erro.
Opa, né?
Para poder ajeitar isso a gente vai ter outra propriedade aqui,
que vai ser a lista em ordem das bandas.
Eu vou dizer lista aqui, e vai ser uma lista que vai ter,
em vez do objeto, vai ser só os ideias da bandas, em ordem que você quiser.
Se você quiser cada uma apareça na ordem que eu pus aqui,
você pode fazer 121, 122, 123,
mas o que é legal sobre isso é que você pode mudar a ordem,
por exemplo, 123, 122, ele vai mudar a ordem,
mas esse cara aqui vai continuar na mesma, tá?
Então, vou deixar na ordem que já está aparecendo aqui.
Aí a gente vai pegar e fazer o que?
Mapar cada ID para cada objeto,
quando a gente fizer o nosso seletor lá.
O seletor vai estar um pouco mais complexo, tá?
Agora já melhorou um pouco,
a gente vai precisar mapear essa lista aqui.
Então, vamos fazer isso.
Vamos lá no seletor aqui.
Split, então,
banda seletor.
Agora, o que a gente tinha antes era bem simples,
agora não vai mudar, tá bom?
Vamos mudar esse cara.
Como é que a gente vai pegar a lista agora
desses objetos aqui, desses nomes, né?
Para poder fazer isso, vou fazer o seguinte, olha aqui.
A gente vai percorrer essa lista
e para cada ID, a gente vai olhar nesse hash, né?
E pegar o objeto e passar esse objeto de volta aqui,
e gerar uma lista de objetos para cada ID.
Então, vamos lá.
Então, a gente vai ter o quê?
Vai ter o hash, né?
Bandas que já temos aqui,
mas agora o problema é que esse cara vai ter...
Vamos chamar bandas hash aqui.
Vai ser esse cara.
Então, se você pegar esse cara, vai retornar o quê?
Vai retornar esse cara todo aqui.
Agora, a gente tem que percorrer a lista.
Então, vamos lá.
State.bandas.lista
e vamos mapear cada ID, vou chamar banda ID.
Cada ID a gente tem que retornar o quê?
Retornar o objeto corresponde, que corresponde a gente?
Esse ID.
Mas como é que acessa esse objeto?
Note que o banda hash,
se você der uma propriedade, o ID,
ele vai retornar o quê?
O objeto que corresponde ao ID.
Então, a gente vai falar return.
Bandas hash.
O ID aqui, tá?
Esse cara aqui, por exemplo, se banda ID for 122,
ele vai pegar bandas hash, que captura esse cara.
E vai pegar propriedade 122,
que vai capturar esse cara, tá?
E é o objeto e vai ser retornado,
esse cara aqui vai retornar a lista desses objetos aqui.
Tá bom?
Salvar.
Agora, vamos modificar a lista de bandas.js,
porque agora, a gente...
Esse cara aqui é um objeto, não é mais só um string.
Então, que vai ser banda.id,
e o valor vai ser banda.name.
Tá?
Passa.
Note que eu já te já dirijo antes,
se você quiser mudar a ordem, olha aqui, tem legião,
red e ir, se for 123 e 122 por último,
ele só vai mudar a ordem,
que o iron está em segundo e red em terceiro,
em vez do contrário.
Então, é bem legal você poder reordenar a lista dessa maneira.
Então, acho que é hora da gente dar uma pausa,
o que é que a gente fez até agora.
Nós pegamos, modificamos o estado aqui,
do sub...
subcessão aqui no estado, chamada bandas.
Normalizamos, né?
Essa propriedade bandas,
em vez de ter uma lista de strings,
a gente fez...
Pegou e fez um objeto para cada banda,
que isso normalmente acontece.
Em casos reais, né?
A gente pega,
e cada recorde de ter associado a um ID único,
a gente faz a normalização do estado.
Significa que a gente vai manter um hash, né?
Um map.
Hash map aqui, que é indexado pelo ID do recorde,
nesse caso, o ID da banda.
E se você quiser manter uma lista,
por exemplo, que a gente fez no nosso aplicativo,
mostra uma lista,
você tem que fazer uma propriedade separada,
que contém a ordem, né?
Da lista do uso.
E em vez de você armazenar os objetos,
você armazena os IDs que correspondem a objetos.
Por quê?
Porque os objetos já estão armazenados aqui.
Se você for armazenar o mesmo objeto ali,
em outro canto,
ele não vai ser mais o mesmo objeto,
vai ser objeto diferente,
embora que as informações sejam as mesmas,
e não vai ter mais aquela única fonte de verdade.
Aí você vai ter vários problemas
para poder sincronizar esses dados,
por isso que a gente sempre usa o ID nessas listas.
Aí a gente vai...
Teve que modificar o seletor
para poder mapear cada ID
para um objeto real desse hash das bandas, tá?
E não se esqueça do li,
que a gente tem que adicionar ponto ID e ponto nome aqui.
Então vamos dar uma pausa para essa aula só,
e até a próxima.


0013-07 Normalização do Estado (Aula React & Redux)

Reusando o Selector (Aula React & Redux)

# Resumo da Aula sobre Seletores

Nesta aula, o foco foi na utilização de seletores em um aplicativo que utiliza Redux. O instrutor começou normalizando o estado do aplicativo e, em seguida, abordou a necessidade de conectar componentes ao Redux.

## Conectando o Componente Perfil

1. **Conexão com Redux**:
   - O componente "Perfil" deve ser conectado ao Redux utilizando a função `connect`.
   - A função `mapStateToProps` é utilizada para mapear o estado ao componente.
   - O estado do nome é acessado via `state.perfil.nome`.

2. **Uso de Seletores**:
   - O instrutor ilustrou como reutilizar seletores em vez de acessar o estado diretamente.
   - Um exemplo foi dado para obter uma lista de "bandas favoritas" usando o seletor de bandas.

3. **Implementação da Lista de Bandas**:
   - A função `RenderBandasFavoritas` foi criada para mapear as bandas favoritas e renderizá-las em um componente de lista.

## Conveniência dos Seletores

- O instrutor explicou que, se o caminho do estado mudar (por exemplo, mudando de "bandas" para "grupos musicais"), apenas o seletor precisa ser atualizado.
- Isso evita a necessidade de modificar todos os componentes que utilizam esses dados, mostrando a flexibilidade e a conveniência de usar seletores.

## Exercícios e Recomendações

- Foi deixado um exercício para os alunos configurarem o seletor de nome de perfil.
- O instrutor enfatizou a importância de manter os seletores organizados, sugerindo que se crie seletores separados para diferentes partes do estado quando necessário.

A aula concluiu com a instrução de retornar o estado do reducer de volta para "bandas" e uma despedida do instrutor.

Até a próxima aula!

Fala pessoal, estamos de volta.
Vamos continuarmos aprendizado do conceito de seletor.
A gente normalizou o estado do aplicativo para poder...
Eu ilustrar os pontos aqui dos seletores.
Temos a lista de bandos aqui.
Vamos continuar com aquele negócio do perfil.
Então, vou no componente perfil aqui.
Por exemplo, a gente pode botar o nome da pessoa, né?
E vai vir de props, né?
Vamos botar desse, props.nome, por exemplo.
Como é que a gente vai pegar esse nome?
Tem que conectar esse componente ao Redox.
Como é que conecta, se lembra?
Você vai chamar o connect.
Primeiro, clique para passar o mapState, o props, essa função.
E a gente vai definir aqui um argumento state
e tem que retornar o objeto às propriedades que a gente quer indivitar.
E você chama essa resultado aqui função,
essa função com o componente perfil como argumento, tá?
Agora, tem que portar porque a gente está usando connect,
como lá em port, connect from...
Da onde?
Tá? Agora, o que a gente precisa do nome?
Agora, onde é que está o nome?
Nome, vai aparecer como prop, da onde é que vem esse cara?
Se lembra? Vê lá no reducer, inicial aqui.
Está na propriedades chamada perfil.nome.
Então, o caminho é state.perfil.nome.
Vamos lá, state.perfil.nome.
Legal.
Você pode fazer o quê?
Seletou com esse cara também.
Eu deixo como exercício para você fazer.
Seletou para o nome da perfil.
Então, vai ter também aqui...
Vamos supor que você tenha uma lista de...
Ah, vamos ver o perfil aqui.
Desculpa.
Apareceu o meu nome aqui.
Tá certo?
Então, vamos supor que a gente tenha uma lista de bandas
que a pessoa gosta, né?
Obviamente, não vai ser todas as bandas que existem.
Vai ser só algumas.
Mas antes disso, eu quero só ilustrar o ponto de que a gente
pode reutilizar os seletores
e não vai precisar digitar state.noSeuQue,
e.noSeuQue de novo.
Por exemplo, vamos pegar só o bandas,
e vamos usar o bandas seletores.
E usar aqui...
Eu vou colocar bandas favoritas.
Eu vou injetar essa própria, chamado bandas favoritas,
mas vou usar o bandas seletores para poder capturar
todas as bandas.
Ainda não tem filtragem, tá? Ainda não tem filtro.
Aí o que é legal, você pode reutilizar o bandas seletores
aqui e é só importar.
Não esqueça das chaves.
Bandas seletores, front.bar seletores.
Por maneira, a gente está usando o bandas seletores
nesse outro corpo de perfil.
Vai ser injetado aqui.
A gente precisa mapear aqui.
Vamos fazer uma função aqui.
ThisRenderBandasFavoritas
para poder...
Não ter que de poela, lógico, ali.
Bandas favoritas.
Vai ser returnThis.probs.bandasfavoritas.map.
Tá?
Bandas favoritas.
Aí vou colocar ali da mesma maneira que a gente fez antes.
Que é bandas favoritas.id.
Ah, não é div.
L-I-A.
Bandas favoritas.nome.
Agora esqueci da UL.
Então deixa eu colocar aqui.
UL.
UL.
Opa.
Quebrar a linha aqui.
UL.
Tá?
Vamos ver aqui.
Ah, temos essa função aqui.
Bandas favoritas.
Que retorna um L.
Que retorna um L-I para cada banda favorita.
Que a gente vai saber como é o próprio.
Chamar bandas favoritas. A gente vai mapear aqui.
Tá? Então eu que chama aqui a função daqui.
Bandas favoritas.
Ah, esqueci o que é...
Linha 11.
Do perfil.
Ah, esqueci de retornar.
Tá? Aqui é.
Return.
Se você não quiser return, retorna implícito.
É só pôr o parentes aqui.
Sem as chaves.
Dessa maneira que...
Esse é o retorno implícito.
Desprocando o value map.
Esqueci outro parentes.
Tá?
Então meu nome apareceu em todas as bandas.
Mas você note que o primeiro ponto que eu quero listar,
antes de filtrar, é que a gente tem...
No perfil.js temos bandas eletor.
Selecionando todas as bandas.
E temos na lista de bandas.js a mesma coisa do mesmo seletor.
Agora. Agora.
Agora.
Se o caminho dessas bandas no estado mudar.
O que é que vai acontecer?
Vamos lá no subidústio.
Se eu mudar o caminho em vez de ser bandas, grupos musicais.
Aqui em vez de ser...
Vão lá, sei lá.
Ah...
Não deixa bandas mesmo.
E eu mudei aqui.
Se tiver mudar alguma coisa.
Obviamente vai dar erro.
Mas o erro vai estar onde?
No reducer.
Não reducer, não. No seletor.
É?
No bandas seletor.
Aí você vai lá no bandas seletor.
E muda.
Em vez de state.bandas.bandas,
tem as grupos musicais.bandas.
state.bandgroups.musicais.lista.
E ele vai estar tudo correto.
Não é que a gente não precisou modificar
os componentes, listas de bandas.
E o componente perfil.
Então essa...
uma conveniência de usar os seletores.
Você chama a função
para a sustente.
Ele vai retornar o caminho
percorrido e o valor naquele caminho
quando chegar no final.
Então por isso é
bom usar os seletores.
Se os caminhos mudarem,
não vai ter problema.
E mudar o código de cada componente.
Porque o que é que vai acontecer?
É que a gente precisa ficar com o componente.
Porque a gente precisa só mudar o código
daquele seletor.
Tá?
E vou modificar esse cara aqui
de volta.
Quero também ilustrar que
esse cara aqui
poderia ter um seletor
separado para o hash.
Dessa maneira,
esse cara aqui não iria quebrar
o seletor.
Só quem quebrava era o seletor do
hash.
Então acho que por essa aula é só.
E até
a próxima.
Então até mais. Deixa eu mudar o reducer
de volta para
bandas.


0013-08 Reusando o Selector (Aula React & Redux)

Criando Seletor para Selecionar Bandas Favoritas (Aula React & Redux)

# Resumo da Aula sobre Selectores em React e Redux

Nesta aula, o instrutor revisita o conceito de selectores em um aplicativo React com Redux, focando na exibição de bandas favoritas em um componente de perfil.

## Tópicos Abordados

- **Introdução ao Projeto**: O aplicativo está sendo executado no `localhost:3000`, mostrando uma lista de todas as bandas disponíveis.

- **Estado Inicial**: O estado inicial, definido no arquivo `Reducers.js`, possui uma propriedade `perfil` que contém `bandasFavoritas`, onde inicialmente apenas a banda Iron Maiden está listada.

- **Utilização de Selectores**:
  - Anteriormente, um seletor de bandas foi reutilizado em diferentes componentes (lista de bandas e componente perfil).
  - Agora, é necessário criar um novo seletor (`bandasFavoritasSelector`) para buscar apenas as bandas favoritas.

- **Criação do Novo Seletor**:
  - O novo seletor irá acessar `state.perfil.bandasFavoritas`.
  - Ele mapeará os IDs das bandas favoritas para os objetos correspondentes encontrando-os em `state.bandas.bandas`.

- **Desafio para os Alunos**: O instrutor convida os alunos a pausarem o vídeo e implementarem o novo seletor em `selectors.js`.

- **Implementação**:
  - É criada uma variável `bandasFavoritasSelector` para armazenar a nova função seletora.
  - O código exige que os IDs das bandas favoritas sejam mapeados para obter os objetos corretos.

- **Testes**: Após implementar o seletor, o instrutor demonstra como importá-lo e utilizá-lo no componente de perfil, que agora renderiza somente as bandas favoritas corretamente.

## Revisão Final

- **Resultados**: 
  - O componente perfil agora mostra apenas a lista de bandas favoritas.
  - O seletor `bandasFavoritasSelector` é semelhante ao seletor usado anteriormente, exceto que ele trabalha com uma lista diferente (bandas favoritas vs. lista geral).
  
A aula destaca a importância dos selectores em Redux para gerenciar e acessar dados de estado de maneira eficiente, reforçando o conceito de reutilização de código.

Então pessoal, estamos de volta, mais uma aula sobre conceito de selectures com React e Redux.
Vamos continuar o que a gente estava fazendo, temos aqui nosso aplicativo,
estou rodando aqui no localhost 3000.
Então temos a lista de bandas, que tem todas as bandas disponíveis.
Temos o nosso perfil, que agora está mostrando todas as bandas, mas isso não está correto,
porque se você olhar no nosso estado inicial do arquivo Reduces.js dentro do propriedade perfil,
tem um objeto que tem outra propriedade chamada bandas favoritas.
Essa é a lista de ideias das bandas favoritas.
Nesse caso só tem uma que é a banda cujo ideia é um, dois, três.
Um, dois, três seria Iron Maiden.
Então a gente tem que ajeitar esse cara.
Anteriormente a gente aprendeu a reutilizar o selector de bandas,
e a gente usou no lista de bandas, aqui embaixo no map state props, quando dá o connect.
A gente reutilizou o bandas selector no componente lista de bandas e no componente perfil,
só para demonstrar que quando você tiver o estado do aplicativo mudar o caminho de onde os dados estão,
você só precisa mudar o selector, em vez de ter que mudar todos os componentes que se referem àquele caminho,
para aqueles dados.
Então aqui vai ser um selector diferente para o perfil, para as bandas favoritas,
porque o bandas selector se refere a a lista de todos os bandas,
todos os objetos das bandas, em ordem definida pelo estado inicial, pelo reducer,
propriedade lista, dentro do sub reducer bandas.
Agora a gente vai fazer quase a mesma coisa,
exceto que a nossa lista não vai ser essa lista geral,
vai ser a nossa lista de bandas favoritas.
Então para isso vamos aqui no perfil, para o JS, no final do arquivo perfil,
onde você vai retornar propriedade de bandas favoritas, que vão ser injetadas no componente perfil,
não vai ser mais o bandas selector, vai ser um selector que a gente vai criar,
um novo selector, vamos chamar bandas favoritas selector.
Então vamos criar esse selector bandas favoritas selector,
essa função vai pegar o estado e vai retornar o objeto,
ou objetos, uma lista de objetos com as nossas bandas favoritas, nesse caso,
vai mapear um, dois, três para o objeto correspondente, um, dois, três, que é o Iron Maiden.
Se tivesse mais de um, por exemplo, se tivesse também um, dois, dois,
o próximo objeto seria esse aqui na lista.
Tá bom? Então vamos lá, como desafio, eu quero que você pause o vídeo
e faça o bandas favoritas selector, no arquivo selector, esse ponto JS,
cria um novo selector aqui, bandas favoritas selector.
Vai ser quase a mesma coisa do outro, é certo que você vai mudar a lista de ideias,
vai ser uma lista diferente, vai ser a bandas favoritas, que está dentro do substado perfil.
E aí, dá tudo certo? Vamos lá.
Então vou criar uma variável chamada bandas favoritas selector, essa variável vai armazenar uma função,
o parâmetro da função é o state, e antes de mais nada, vou mudar o export aqui
para a gente poder disponibilizar esse selector em outros arquivos para ser importado.
Então primeiro a gente vai precisar do quê? A gente tem a lista, né?
Então a gente vai ver que está essa lista de bandas favoritas, está no state.que?
ponto perfil, ponto bandas favoritas.
Esse é o caminho para acessar os ideias das bandas favoritas,
nossos bandas favoritas, vamos verificar no videoses.js, se realmente é o caso,
estado.perfil.bandas favoritas, certo?
Então a gente vai pegar os ideias, quando a gente se refere a esse caminho,
é uma lista, um array vetor de ideias. Agora a gente precisa mapiar cada ideia para o objeto
correspondente a esse ideia. Nesse caso a gente vai precisar acessar que propriedade do estado?
A propriedade state.bandas.bandas. Aqui vai acessar esse objeto aqui.
E a gente vai usar o ideia para poder acessar, por exemplo, nesse caso, um ideia 1, 2, 3,
e chave para poder acessar esse objeto que a gente vai mapiar e injetar no componente perfil.
Vamos lá? Então voltando aos seleitores post.js.
Então a gente vai pegar esses bandas favoritos, mapiar cada ideia, né?
Então vamos retornar o mapeamento e vai converter cada ideia na lista,
vai fazer uma nova lista, os ideias vão se tornar objetos.
A gente vai fazer o quê? Retornar, a gente vai precisar acessar aquele hash,
que a gente chamou de bandas hash, por exemplo, a gente ainda não definiu nessa função,
vai definir já já. A gente vai usar a chave o id da banda.
E isso vai pegar e retornar o objeto da banda.
Agora, para definir bandas hash, onde é que está esse cara?
Vamos definir uma variável chamada bandas hash, vamos definir esse cara.
Então está onde? Está no state.bandas.bandas, é a mesma coisa do outro aqui.
Vamos ser notos que a gente já tem uma repetição, né?
E a gente vai aprender já já, próxima aula, como a gente pode reutilizar esse código
e fazer a chamada composição de seleitores.
Então vamos salvar isso, vamos testar esse seleitor, voltando ao perfil.js.
Estamos aqui no map.state.props, já escrevemos bandas favoritas de seleitor, mas não importamos.
Vamos lá para o início do arquivo perfil.js e vamos dar o import.
Não vai ser mais bandas seleitores, vai ser bandas favoritas seleitores, que a gente acabou de escrever.
E from.barseleitores, o arquivo correto. Vamos salvar.
Então só apareceu agora a IronMade, a gente já tinha definido a lógica de renderização da lista,
usando a propriedade bandas favoritas, a gente só precisou mudar aqui embaixo a mudar o seleitor,
que a propriedade já estava injetada, com o mesmo nome, bandas favoritas e a lógica já estava lá.
Então a IronMade está aqui, tudo certo, tudo legal.
Antes de a gente terminar essa aula, vamos revisar o que a gente fez.
Então a gente conceptou a página do perfil para mostrar somente as nossas bandas favoritas.
A gente criou um novo seleitor chamado bandas favoritas seleitores e a gente usou para adiantar propriedades bandas favoritas
no componente perfil que a gente já tinha escrito, a lógica para renderizar essa lista.
Então bandas favoritas seleitores, se a gente for no arquivo seleitores de js, é bem parecido com o bandas seleitores,
usamos o mesmo hash para poder acessar aquele hash de objetos de bandas indexados pelo ID da banda,
exceto que agora ele retorna o mapeamento dos IDs das bandas favoritas para cada objeto lá.
Então a diferença somente é que a gente usou outra lista de IDs, a lista geral de todas as bandas,
versus, no bandas favoritas seleitores, uma lista de IDs, somente os IDs das bandas que a gente gosta.
A única diferença está aqui.
Então por essa aula é só e até a próxima.


0013-09 Criando Seletor para Selecionar Bandas Favoritas (Aula React & Redux)

Composição de Seletores (Aula React & Redux)

```markdown
# Aula sobre Composição de Seletores com React e Redux

## Introdução
Na aula de hoje, vamos aprender sobre a composição de seletores em React e Redux. Já temos dois seletores:
1. **bandasSelector**: Seleciona um vetor de objetos com informações sobre bandas.
2. **bandasFavoritasSelector**: Retorna um vetor com objetos das bandas que o perfil gosta.

## Objetivos
Observamos que ambos os seletores compartilham código similar, uma vez que ambos acessam listas em sub-estados diferentes (bandas e bandas favoritas). Para simplificar, podemos criar seletores que acessam esses dados de maneira mais eficiente.

## Composição de Seletores
A composição de seletores refere-se ao uso de um seletor dentro de outro seletor. Isso permite modularizar o código e reutilizar seletores, facilitando manutenções e alterações na estrutura de dados.

### Exemplo Prático
1. **Criar o Seletor `bandasHashSelector`**:
   - Este seletor acessa o estado `state.bandas.bandas`.
   - Exemplo de implementação:
     ```javascript
     const bandasHashSelector = (state) => state.bandas.bandas;
     ```

2. **Utilizar `bandasHashSelector` em outros seletores**:
   - Modificamos **bandasSelector** e **bandasFavoritasSelector** para usar `bandasHashSelector`.
   - Isso permite que, se a estrutura do estado mudar, apenas o `bandasHashSelector` precisa ser atualizado.

### Vantagens
- **Manutenção Simplificada**: Ao isolar a lógica de seleção em um seletor específico, apenas ele precisa ser alterado se a estrutura do estado mudar.
- **Reutilização de Código**: A mesma lógica pode ser utilizada em diferentes seletores, evitando a repetição de código.

## Conclusão
Nesta aula, aprendemos a importância da composição de seletores em React e Redux. Criamos seletores que reutilizam outros seletores, facilitando a manutenção e a legibilidade do código. Até a próxima aula!
```

Estamos de volta com mais uma aula sobre seletores com React e Redux.
Então, vamos aprender a fazer a composição de seletores nessa aula.
Então, até agora nós temos dois seletores, banda selector, que vai selecionar e nos retornar um vetor de objetos.
Cada objeto representa uma informação sobre uma banda.
Temos também o banda favorito de seletor, que nos retorna um vetor com os objetos das bandas que o perfil gosta.
Agora, você note entre os dois seletores que a maioria do código é a mesma,
e o vetor é o que seleciona na lista do sub-stado bandas.
E o segundo seleciona na lista bandas favoritas, o vetor bandas favoritas, que está dentro do sub-stado perfil.
Então, a maneira de a gente melhorar isso, a gente pode criar seletores para poder selecionar o bandas hash.
Seleções, eu poder selecionar essa lista de todas as bandas, dos ideias da todas as bandas em uma específica ordem,
e também para selecionar os ideias das bandas favoritas.
Então, a gente pode criar três seletores aqui.
A gente vai fazer a composição de seletores. Significa o quê?
A composição de seletores é quando você tem um seletor, e esse seletor usa outro seletor.
Então, dentro do seletor, você vai se referir a outro seletor para poder selecionar uma parte do estado.
Então, a composição.
Vamos lá para ilustrar como exemplo.
A primeira coisa que a gente vê é que o bandas hash é o mesmo.
Então, para poder acessar o bandas hash, a gente vai pelo caminho state.bandas.bandas.
Então, esse cara aqui seria o 1. A gente poderia criar um seletor para selecionar esse caminho.
Então, vamos lá em cima. A gente pode dizer, vamos criar uma variável, e eu vou chamar bandas hash seletor.
Essa variável vai ser a mesma padrão de função de seletor, que é como o primeiro parâmetro do estado.
E é uma função que vai retornar o state em um caminho.
Nesse caso, vai ser ponto bandas.bandas.
Mesma coisa aqui.
Então, quando você chama esse seletor, com o estado, ele vai retornar ponto bandas.bandas,
que vai selecionar o quê? De volta ao arquivo ridos do .js, para confirmar.
Vai selecionar state.bandas.bandas, vai selecionar esse cara aqui.
Um objeto cujas chaves são o ID de cada band.
Então, com esse seletor definido aqui, bandas hash seletor, nós podemos reutilizá-lo aqui e aqui.
Então, em vez de falar state.bandas.bandas aqui no bandas seletor, nós vamos falar o quê?
Bandas hash seletor e passa o state.
Ele vai pegar esse state, vai passar como argumento para bandas seletor, e o bandas seletor vai retornar aquilo que a gente tinha antes.
Quero ver você fazer para o outro aqui.
Vamos lá, é só dizer bandas hash seletor, passa o state.
Vamos salvar e testar.
Parece que não houve problemas.
Tudo ok.
A gente acabou de fazer uma composição de seletores.
Temos um seletor dentro de outro seletor.
Isso é a composição de seletores.
E quando a gente fizer dessa maneira, se lembra que eu tinha mudado o caminho das bandas?
Por exemplo, se eu tivesse mudado esse cara aqui no reducer.jotess, no nosso caso aqui, se eu tivesse mudado por exemplo,
grupos musicais seria o uso.
Não, nesse caso não vai dar certo porque o lixo está dependendo nele.
Mas se eu tivesse mudado, por exemplo, grupos musicais nessa pra ser esse objeto aqui,
o que que iria falar?
Iria falar que ele não sabia o que é o bandas hash, iria falar, né?
Porque ele iria se referir ao ponto bandas, ponto bandas que não existe mais.
Então eu teria que mudar grupos musicais aqui pra poder ajeitar e tá tudo certo agora.
Note que agora fazendo isso, eu só tive que mudar o bandas hash select seletor pra poder corrigir o problema.
Eu não tive que mudar o bandas seletor, eu não tive que mudar o bandas favoritos seletor.
Então dessa maneira a gente isolou o bandas hash selector e o caminho pode ser qualquer caminho que vai funcionar
porque sempre ele se refere ao bandas hash selector que é único, não é o caminho escrito em cada selector.
Então tá, essa é a vantagem da, uma das vantagens de fazer isso, né? Como a gente já tinha aprendido antes.
Tá?
Então vamos voltar ao reducers e reverter, mudar de volta esse cara pra bandas.
Certo?
Reverte o bandas hash pra bandas.
Pronto? Legal, então vamos revisar, a gente aprendeu a fazer a composição de seletores.
Significa o quê? Que você tem a definição de seletor que usa outro seletor dentro da sua implementação.
Só isso, seletor dentro de um seletor.
Se tem uma vantagem a gente pode reutilizar aquele seletor em vários cantos e se mudar o caminho, por exemplo,
é só mudar lá no seletor que todos os caminhos irão mudar em cada seletor que usa aquele seletor dentro de si próprio, tá?
Então por assalas só e até a próxima.


0013-10 Composição de Seletores (Aula React & Redux)

Composição de Seletores Parte 2 (Aula React & Redux)

# Resumo da Aula sobre Seletores com React e Redux

Nesta aula, continuamos a explorar o conceito de seletores em React e Redux, especificamente focando na composição de seletores. Já desenvolvemos o `Bandas Rash Selector` e agora vamos criar os seletores `Bandas Selector` e `Bandas Favorito Selector`, ambos utilizando o `Bandas Rash Selector` em sua implementação.

## Desafio

O desafio da aula é criar seletores que possam selecionar:

1. A lista de IDs de todas as bandas.
2. A lista de IDs das bandas favoritas.

## Implementação

1. **Criar Selectores**:
   - **Selector das Bandas**:
     ```javascript
     const bandasListaSelector = state => state.bandas.lista;
     ```
   - **Selector das Bandas Favoritas**:
     ```javascript
     const bandasFavoritasIdSelector = state => state.perfil.bandasFavoritas;
     ```

2. **Uso dos Selectores**:
   Para utilizar os seletores, basta chamar a função passando o estado:
   ```javascript
   const bandas = bandasListaSelector(state);
   const bandasFavoritasIds = bandasFavoritasIdSelector(state);
   ```

## Conclusão

Nessa aula, conseguimos criar os seletores `bandasListaSelector` e `bandasFavoritasIdSelector` que nos permitem acessar, respectivamente, a lista de IDs de todas as bandas e a lista de IDs das bandas favoritas. Assim, praticamos a composição de seletores. 

A aula se encerra aqui, e nos vemos na próxima!

Estamos de volta, mais uma aula sobre conceito de seletores com o React e Redux.
Nessa aula vamos falar, vamos continuar a nossa composição de seletores, já fizemos o
Bandas Rash Select.
Agora o Bandas Seletor e o Bandas Favorito Seletor, ambos os seletores utilizam o Bandas
Rash Seletor dentro da sua implementação.
Isso é a composição de seletores.
Agora vamos aqui fazer, eu quero te desafiar para você fazer um seletor para selecionar
a lista de idês de todas as bandas e a lista de idês das bandas favoritas.
Quero ver você substituir esses dois aqui por um seletor cada.
Então vamos lá, vamos lá em cima, eu vou dizer, vou chamar a bandas lista de bandas
ou qualquer nome que você quiser, tá?
Seletor, uma função e retorna o caminho state.bandas.lista.
Com isso a gente criou o seletor, a gente vai onde a gente estiver usando aquele caminho
e veio usar o caminho, é só passar bandas lista seletor com o state, tá?
Ele vai pegar e esse cara vai retornar a lista de bandas.
Se quiser você pode esperar esse cara para variar se você não achar que não está
muito claro o que está acontecendo aqui.
Então sem problemas, no lado esquerdo aqui, no navegador, fazemos a mesma coisa para
bandas favoritas.
Criar uma variável, bandas favoritas, seletor.
Opa, a gente já tem esse nome.
Tem que ter um outro nome, bandas.
Id de bandas favoritas, sei lá, bandas favoritas, id, seletor, tá?
State.
É tal no que?
State, perfil, ponto, bandas favoritas.
Com isso a gente vai lá, a gente estiver usando state, perfil, bandas favoritas, só falar
bandas favoritas, id, seletor, passa, chama essa função, costê.
Para você não ficar muito confuso, deixa eu só criar uma variável.
Id, seletor.
E a mesma coisa se você quiser, se você estiver claro para você o que está acontecendo.
Id.
Então só peguei a amazenia lista, fetode id, variável id.
Vamos testar no lado esquerdo, sem problemas.
Legal.
Então criamos nessa aula, bandas listas seletor e bandas favoritas id seletor, para poder
se acessar na id, os id, vetor de id de todas as bandas e vetor de id das bandas favoritas,
respectivamente.
Então essa é a composição de seletores.
Pra essa aula é só e até a próxima.


0013-11 Composição de Seletores Parte 2 (Aula React & Redux)

Aprenda a Usar a Biblioteca Reselect (Aula React & Redux)

```markdown
# Aula sobre a biblioteca Reselect

Neste vídeo, aprendemos sobre a biblioteca **Reselect**. A principal funcionalidade desta biblioteca é a criação de **selectores**, que têm a vantagem de serem **memoizados**.

## O que são Selectores?

- Selectores são funções que recebem o estado da aplicação como parâmetro e retornam um valor.
- Exemplo: Um selector que recebe o estado e retorna `state.noCQ`.

### Criação de Selectores

- Utilizamos a função `createSelector` para compor selectores. 
- Um selector pode usar outro selector, como em um caso onde calculamos o preço total de produtos.

## Por que usar Memoização?

- No React, o método `mapStateToProps` é chamado toda vez que o estado ou as props mudam, o que pode levar a cálculos desnecessários.
- **Memoização** evita recalcular resultados já obtidos, reutilizando soluções para entradas iguais.
  - Caso haja uma entrada que já foi computada, o Reselect utilizará o resultado armazenado, economizando tempo de processamento.

## Vantagens do Reselect

- Melhoria no desempenho de aplicações que realizam cálculos pesados ao evitar recomputações desnecessárias.
- Armazena soluções de problemas anteriores, permitindo que resultados anteriores sejam reaproveitados.

### Próximos Passos

- Na próxima aula, aprenderemos como implementar e usar o Reselect para construir seletores eficientes.

Até mais!
```

Lá pessoal, neste aula vamos aprender sobre a biblioteca.
Reselect, ok?
Nesta biblioteca nós podemos criar selectores,
mas a vantagem dos selectores do Reselect é que eles podem ser,
podem ser memoizados, ok?
Tem a memoização, a gente vai falar já já o que é isso.
Então, Reselect, estou aqui na página,
gethub.com.bar, Reduction.js.bar. Reselect.
Vou dar uma olhada aqui.
Vamos já sabermos do conceito de selector.
Por exemplo, esse é um selector, né?
Esse aqui é apenas uma função escrita de maneira curta,
com o retorno implícito e a função de Flash ou CETA, error function.
Então, é somente o variável que pega o estado como parâmetro da função
e retorna o caminho state.noCQ,
a mesma coisa, o selector.
Na hora que ele faz aqui a composição, ele cria selectores com essa função
createSelector e tem a composição de selector aqui.
Note que tem um selector que está usando outro selector
e ele está fazendo uma computação de preço aqui, total.
Então, a gente vai ver que, por exemplo,
se você tem um aplicativo e certa parte de seu aplicativo
precisa fazer computar, né?
Fazer uns cálculos para poder apresentar os dados, né?
Então, essa computação de esses cálculos,
a maneira que o react funciona é que o mapStateToProps
vai ser sempre chamado de novo toda vez que o estado mudar, né?
Então, se você...
Normalmente, se lembra que o método render,
o react é chamado várias vezes, não é só uma vez.
Toda vez que o estado ou as props mudam,
render é chamado novamente
e aquela chamada de renderização vai chamar o mapStateToProps novamente.
Se você tem um cálculo e você fica chamando,
fazendo a chamada para fazer o cálculo de novo,
fazer o cálculo de novo,
e você note que sempre você está fazendo o mesmo,
você tem as mesmas entradas, né?
E a mesma saída.
Se você tem a mesma entrada e você espera a mesma saída,
para que fazer aquele cálculo de novo?
Você está perdendo tempo,
você está perdendo tempo de processamento
toda vez que você renderiza de novo.
Então, se você realmente tiver um aplicativo
que faz a computação pesada,
isso não vai ser legal,
não é preciso, não é necessário você
recomputar uma coisa que você já fez.
Se você já resolveu o problema,
você já tem a solução,
você não precisa resolver o problema de novo,
você não precisa pensar de novo na solução.
Então, esse é o conceito que o Reselect usa,
conceito de memoização.
Se você tem um problema
e você já resolveu o problema,
ou parte do problema,
porque não reutilizar a solução daquele problema
ou da parte do problema.
Então, o Reselect vai armazenar a solução
dos problemas que ele já computou.
E na hora que você for recomputar alguma coisa,
e a entrada foi a mesma entrada
que você já calculou anteriormente,
ele vai apenas reutilizar o resultado armazenado
de cálculos anteriores.
A memoização.
Tá certo?
Esse é um dos motivos para poder usar o Reselect.
Então, a gente vai partir primeiro,
vai aprender como usar o Reselect
para poder fazer os nossos seletores
da maneira que a gente já tinha feito.
Agora, vamos fazer usando o Reselect.
Então, vamos dar uma pausa aqui
e a gente te veja na próxima aula.
Até mais.


0013-12 Aprenda a Usar a Biblioteca Reselect (Aula React & Redux)

Debugando a Motivação para Usar Reselect (Aula de React & Redux)

# Resumo da Apresentação sobre `reselect`

Na apresentação, o foco foi entender o problema relacionado ao uso de `mapStateToProps` no Redux e a motivação para utilizar a biblioteca `reselect`. Aqui estão os principais pontos abordados:

## Problema do `mapStateToProps`

- A função `mapStateToProps` é responsável por pegar o estado do Redux e injetar as propriedades necessárias no componente.
- Cada vez que o estado do Redux muda, o `mapStateToProps` é chamado novamente.
- Isso cria um problema de desempenho, especialmente se a função envolvida for computacionalmente intensiva. Se dados não relacionados mudarem, mas o estado do Redux for atualizado, a função será recalculada desnecessariamente.

## Solução: Uso do `reselect`

- O `reselect` permite a criação de selectores "memoizados", que armazenam os resultados de computações anteriores.
- Se a mesma entrada for recebida, o `reselect` retorna o resultado armazenado, evitando cálculos desnecessários e melhorando o desempenho.
  
## Demonstração Prática

- O apresentador demonstrou um exemplo prático onde um botão em um componente `Lista de Bandas` altera o estado do Redux.
- Ele utilizou `console logs` para rastrear quando `mapStateToProps` e os selectores são chamados.
- Ao modificar o estado, ele validou que o `mapStateToProps` e o selector eram chamados novamente, mesmo para dados que não afetavam a lista de bandas.

## Conclusão

- O problema do `mapStateToProps` é que ele sempre recalcula a saída quando o estado do Redux muda, mesmo para dados irrelevantes.
- O uso de `reselect` é recomendado para evitar recalculações desnecessárias, garantindo que apenas as partes relacionadas do estado sejam afetadas.

A apresentação termina com uma promessa de que a próxima aula abordará a implementação do `reselect` para resolver os problemas discutidos.

Olá pessoal estamos de volta nós vamos falar aqui vamos entender o problema do
map state props de
o problema que a gente falou antes do motivo a motivação para poder usar o
re-select então antes de instalar o re-select vamos primeiro falar desse
primeiro entender o que está acontecendo
vamos esperar um pouquinho antes da gente instalar o re-select
então a gente falou que anteriormente que o map state props aqui
então essa função que pega o state do re-dux
e você injeta propriedades para selecionar a parte do estado que você quer aqui
seja utilizado no componente
agora toda vez que esse state do re-dux mudar o map state props vai ser chamado
novamente agora
pode ser que o state você se lembra o state do re-dux ele armazena todos os dados
do aplicativo não é só essa parte das bandas é tudo mesmo né
tudo mesmo então se alguns dados
furem relacionados a banda mudar obviamente você quer que esse cara seja
executado novamente vai ser sentido agora se você tiver dados que forem
não relacionados a essa página aqui de bandas por exemplo então essa página
não depende daqueles dados então mas aqueles dados mudarem o estado com total
do re-dux vai mudar causa disso vai chamar o map state props novamente agora se
você tivesse uma computação intensiva e um desses selectores por exemplo você
vai fazer um cálculo que envolve muito processamento então é pesado leva tempo
então você faz uma vez tá certo precisa fazer uma vez mas aí se o estado do re-dux
mudar né tiver atualização ele vai chamar o app state props de novo caso é
disso vai chamar o selector de novo quando chamar o selector de novo o selector
vai recalcular tudo aquilo novamente então você tem o problema que você já
recebeu mas ele vai resolver o problema novamente então a perca de tempo
perca de processamento tempo de processamento a gente não precisa resolver o
problema de novo o problema já foi resolvido a gente não precisa recucular
então esse é o problema que tem nos selectores e essa motivação para usar o
re-select a biblioteca re-select permite a criação de selectores memóisados
significa que o re-select vai criar um selector que dá dada uma entrada que já
foi já foi recebido anteriormente o re-select vai armazenar a solução da
quele problema porque ele espera que a mesma entrada vai dar a mesma saída
já então como ele já resolveu que o problema ele vai armazenar a solução do
problema e toda vez que o app state props foi chamado novamente aquele selector
memoizado vai olhar e veio já fiz essa já resolvi esse problema não precisa
recalcular tá aqui a solução ele vai usar o valor da solução que foi
anteriormente a gente vê que realmente o app state props tá sendo chamado toda vez
que o state do re-select muda a gente vai dar uns com escrever uns console logs aqui
pra ver o que está acontecendo por trás de tudo tá vamos aqui começar do lista de
bandas no render aqui do lista de bandas antes do return vai dar o console log
vou dizer o nome do componente seguido do nome da método jogo da velha nome do
método dizer que foi chamado tá nós que vai se chamar uma vez lá do esquerdo tá
agora vou adicionar o botão aqui tá antes da lista pode ser no botão tipo
type botão para a gente poder clicar esse botão clica aqui e esse botão vai
emitir uma ação essa ação vai ser lidada no reducer e a gente vai
modificar o estado do redux essa modificação do estado vai causar a
a chamada do méxico de props novamente tá então vai adicionar um clique vou
chamar o definir o método no lista de mandas chamada um clique mesmo nome tá
deixa eu abrir clica e escrever um clique o da o console log aqui também
lista de bandas um clique salvar no tal botão lá se clicar vai dar o console log
tá então aqui a gente vai emitir uma ação a como é que a gente vai fazer isso
então a gente usou o connect então o list de bandas está conectado ao redux
se você for no render aqui eu adicionar desse ponto prop no console log você vai ver que o
lista de bandas recebe as seguintes prop lembra que é ser bem bandas né já sabia disso mas
também o método dispatch do redux para a gente poder emitir ações despachar ações tá
então a gente vai usar esse cara desse ponto props dispatch e passa um objeto
descreve a ação a ação sempre tem pelo menos o propriedade type e eu vou dizer o ação de sei
que é modificar a estado tá tá tá e fazer assim tá
e se você quiser adicionar mais negócio botar pelo
tá qualquer coisa aqui
e lá
nova data por exemplo
tá então eu vou emitir essa ação de tipo modificar a estado e vou botar como um
payload aqui uma nova data quando você der um click clicar o botão agora
para poder clicar esse cara vamos dar o bind no constructor senão ele vai dar problema
quando você se aferir ao des dentro do um clique super props
a des um clique des um clique bind des
e
clica aqui
tá clica aqui certo mas agora a gente tem que lidar com essa ação porque a ação foi emitida
mas não tá sendo lidada no redux para lá no redux 4js no redux aqui não tem nada
então eu vou botar se a action ponto type o tipo de ação for modificar a estado
nós queremos retornar um novo estado tá então vou dar o return um objeto
fazer as propriedades do estado anterior e adiciona nova propriedade tá eu só vou dizer sei lá
nova propriedade aqui vai ser o action ponto payload aquela data tá
e aí
e aí
e aqui ficar
tudo certo se você quiser verificar se nova propriedade realmente foi
mudado você pode ir no lista de bandas injetar a propriedade no map state props aqui chamada
nova propriedade
vai ser state ponto nova propriedade só para ver ficar lá no console log que realmente apareceu
norte inicialmente não tem nada
clica aqui nova propriedade virou date legal vamos lá botar o console log
aqui no map state props pra ver realmente a chamada novamente essa função
e também no selector bando selector vai no selector ponto js bando selector e vou dar um console log
salva aqui
vamos olhar os console logs
e aí
inicialmente o map state props é chamado e o selector de bandas é chamado finalmente o
lista de bandas é renderizado
aí a gente clica o botão depois disso o botão é clicar maps state props olha aqui
chamado novamente o selector é chamado novamente
lista de bandas tudo certo
a propriedade aqui mudou tá então se você continuar
fazer isso note que sempre fica chamando o map state props e o selector
mas vamos supor que essa nova propriedade eu vou comentar aqui tá não seja relacionada
desse componente embora que esteja lá no estado
do redux né
vamos supor que a gente não depende desse cara
mas se eu clicar aqui o botão pra permitir a ação que vai setar o
nova propriedade fica sempre chamando o bando selector um app state props porque porque o
estado do redux mudou estado tem tudo mesmo que a gente só use a parte daquele estado
ele ainda vai chamar o map state props se o bando selector ou qualquer outro selector que a
gente está usando aqui fosse um selector que fizesse computação intensiva que demora que leva
muito ao processamento não não é pegar e fazer isso de novo que a gente já fez a computação né
mas é aquele mesmo problema que a gente já falou então para isso a gente precisa fazer a
memoização agora você pode fazer isso manualmente mas eu vou te ensinar como fazer usando o
reselecta se fosse manualmente você teria que ir lá no seletor
no seu seletor você teria que checar armazenar o cálculo por exemplo se seletor faz nos cálculos
aqui no corpo dele naquela primeira vez que você fizer o cálculo você pega o resultado armazena
em algum alguma estrutura uma estrutura de armazenamento de resultados anteriores por exemplo um objeto
aí se você chamar os bandos selector novamente você checaria
com essa entrada aqui nesse caso com o banda hash e use de se ele forem os mesmos tá se a entrada
foi a mesma eu olho naquela tabela aí eu já fiz esse problema com essa mesma entrada tá de bandas
e hash de solução o valor tá aqui eu vou usar esse valor pronto tá aí essa é o retorno do seletor
tá com o puteio não precisa fazer isso novamente então isso pega o resultado na mesma hora em vez
de partir para os cálculos novamente tá mas a gente não vai fazer isso a gente vai usar o reselect
que vai fazer isso tudo para a gente então para essa aula é só e até a próxima


0013-13 Debugando a Motivação para Usar Reselect (Aula de React & Redux)

Como Usar o Reselect para Criar Seletores Memoizados (Memoization / Memoização)

# Aula sobre Reselect

## Instalação do Reselect

- Iniciamos a aula instalando a biblioteca **reselect** utilizando o terminal:
  ```bash
  npm install reselect
  ```
- Confirmamos a instalação da versão 4 no `package.json`.

## Criando um Selector com Reselect

### Usando a Função `createSelector`

- A principal função que vamos utilizar é a `createSelector` do reselect, que cria um **selector memoizado**.
- Para usar `createSelector`, é necessário importar:
  ```javascript
  import { createSelector } from 'reselect';
  ```

### Estrutura do Selector

- `createSelector` aceita **selectores** como argumentos, seguidos por uma função que recebe os resultados desses selectores.
- Exemplo de definição de um selector:
  ```javascript
  const bandaSelector = createSelector(
    [bandasHashSelector, bandasListaSelector],
    (bandasHash, bandasLista) => {
      // Implementação
    }
  );
  ```

### Comparação de Selectores

- Um selector original é usado diretamente sem composições.
- O selector com `createSelector` permite a composição de vários selectores, proporcionando melhor performance e eficiência ao evitar cálculos repetidos.

### Funcionalidade de Memoização

- O selector com `createSelector` é **memoizado**, ou seja, ele armazena resultados das computações. Se os parâmetros não mudarem, ele não executa a lógica novamente, melhorando a performance da aplicação:
  - Exemplo de uso em ação:
    - Se o state (banda hash e lista) não mudar, o selector não recalcula e evita chamadas desnecessárias.
  
### Conclusão da Aula

- Aprendemos a:
  - Criar selectors usando `createSelector`.
  - Compor selectores para otimizar a lógica.
  - Utilizar a memoização para evitar computações repetitivas.

## Exercício Proposto

- Como exercício, sugiro implementar um **selector** chamado `bandoFavoritoSelector` utilizando `reselect`.

 *Até a próxima!*

Olá a todos nesta aula vamos instalar o reselect e criar nosso primeiro selector usando reselect
vamos lá primeiro vamos instalar o reselect usando o terminal aqui estou no diretor do
projeto chamado bandas o da npm install re sl e e tá reselect
final pouquinho
pronto instalou o select versão 4 olha aqui no package ponto de json versão 4 já nesse
vídeo vamos estamos usando versão 4 pronto instalamos o reselect agora vamos lá no nosso
selector vamos fazer o seguinte do banda selector por exemplo nós vamos recriar o
banda selector usando o reselect como a gente vai fazer isso fazer o seguinte
então antes de partir para isso no reselect a função mais base que a gente vai aprender é
a função create selector tá essa função funcionar a seguinte maneira esse cara vai criar um
selector memoizado tá selector selector memoizado acho que esse é o termo em português se você tiver
um que tem agora isso vale bom a create selector tá esse cara eu vai vir do
criat selector selector tá eu vou escrever aqui então o a função é que a selector não esqueça
das chaves do pacote reselect você vai chamar assim agora os argumentos então os primeiros
argumentos tá vão ser selectores tá você tem que passar selectores e o último argumento vai ser
a uma função que vai usar com argumentos cada valor referenciado pelos selectores tá por exemplo
por exemplo voltando aqui no bando selector nós usamos que selectoris dentro do bando selector
nós usamos o bandas a selector e o bandas de selector temos dois selectores que a gente usa dentro
de selector então nós diríamos primeiro tá põe o primeiro selector que você está usando bandas
acho selector depois qual o segundo selector põe a vígula vai ser o bandas lista selector tá
pronto terminamos a lista de selectores que serão utilizados dentro desse selector tá
composição de selector então esse é o selector para a banda selector vamos botar aqui a consta
bando selector esse cara agora o terceiro argumento argumento vai ser uma função é eu abri a função
aqui os argumentos para a função serão os valores bandas hash e banda lista respectivamente
tá bandas hash e o bandas liste então os selectores que forem listados antes da função serão usados
como argumento tá o valores que se referem a cada selector serão usados como argumento em sequência
nessa última função aqui então você vai poder usar o bandas hash e o id nesse caso que eu falei
usando essas duas variáveis aqui bandas hash e bandas liste tá e com isso é só você fazer
operação que quiser nesse caso a gente está mapeando os id liste de id para lista de objetos
então você pode dizer return bandas lista ponto meta tá o id da banda banda id e você vai retornar o que
é a torna bandas hash usando banda id tá
vamos comparar aqui na do lado
e
um com o outro do lado esquerdo temos o selector original sem usar o reselect lá direto temos o
selector usando reselect tá então você se tiver normalmente você usa isso quando já
tiver composição de setores se você não tiver se você já tiver selector só usando o caminho
por exemplo banda banda lista selector que tiver state quando banda lista não é ok não precisa nem
usar a crade selector é só que definir dessa maneira aqui mas se você tiver um selector que utiliza
outros setores é a composição você pode criar usando crade selector passa a lista de setores que
serão utilizados e no final passa uma função essa função corresponde a os valores correspondentes
para selector listado em ordem bandas é selector vai te dar o bandas hash que vai aparecer na variável
bandas hash bandas lista selector vai te dar aquela lista de id que aparecer na variável
bandas listo e aqui no corpo você faz a mesma operação que a gente fez anteriormente aqui tá
e essa lista pode ser não me possa 2 3 4 pode ser 1 2 3 4 sim por diante mas sempre no final
essa é a função tá só como nota vale a pena também dizer que também tem outra maneira de
definir esses setores eu acho que você pode usar uma lista o vetou em vez de botar separados por
viva você olhar lá a documentação do select ele te diz que você pode fazer isso tá a nota que
ele fez a maneira que ele fez a não sei se ele tem aqui dizendo que também for usar uma vetou
e aí e aí e aí e aí e aí e aí e aí aqui ó nessa parte que ele diz do criado selector ele diz
que você pode passar sim tá ou você pode passar uma vetou tá de selectores tá
diferença essa primeira é só um argumento que é uma lista de vetores nessa outra o outro que a
gente fez é vários argumentos passados pro criado select não é só um dentro de um vetou tá você
preferir eu faço dessa maneira aqui tá certo faltando aqui vamos utilizar testar esse cara
eu vou comentar o selector banda selector anteriormente anterior vou pegar esse cara aqui copiar
e eu vou recortar pra cá e vou pegar esse import porque a gente precisa importar lá em cima
lá pra cima do arquivo import e select do reselect não esqueça da chave
voltando aqui eu vou copiar esse console log eu quero manter dentro do corpo do selector aqui tá aqui
e salvar não se esqueça de dar o export consta
pronto e corta e seguir e salvar vamos ver o que deu lado esquerdo aqui
e aí
e então resolver aqui é iniciar o aplicativo a lista de bandos ainda está lá corretamente
e o perfil a gente nem pediu o perfil mas lista tá ok que acontece quando a gente clica clica aqui
e aí
e aí então ele deu um clique chamou o mapa state props mas não chamou banda selector olha aqui não
chamou esse console log clica aqui deu um clique map state eu clique map mas não chamou banda selector
porque porque ele tá meio moizado isto é ele já fez computação na primeira vez com o
que a entrada primeiro tem duas entradas aqui duas bandas hash e bandas liste
note que aquela mudança dos estados do redux que a gente fez emitindo aquela ação se lembra
modificar estado que adicionou a sua nova propriedade não modificou quem não modificou os dados
que são referidos pelo bandas hash bandas liste que são quem bandas hash esse cara aqui não
modificou esse não mudou e o bandas liste não mudou também né então nenhum desse cara mudaram por
causa disso né a entrada não mudou a computação foi feita uma vez anteriormente o geselect armazenou
o resultado daquela computação que nesse caso é o mapeamento desses três objetos dentro de um
e ele só fez uma vez na próxima vez né ele não executa a computação nesse caso quando eu
falo computação eu falo a execução desse corpo aqui dessa função ele não chamou console log tá
e isso foi memoizado se você imaginar que esse banda selector você generalizar isso e você
vai no selector que faz muita computação não precisa ser essa maneira que pode ser um cálculo
massívulo muito pesado ele só vai fazer uma vez para a mesma entrada e saída né então ele não
vai chamar o corpo aqui para calcular de novo por causa da memoização tá muito importante isso
e essa motivação uma das motivações para usar o reselect
então aprendemos
nessa aula fazer revisão aqui aprendemos a criar o um selector usando o reselect qual é a função
create selector que vem do pacote reselect dá o import com as chaves
aí passa a lista de selectores como argumento separado por vírgula e seguindo no final o
último argumento é uma função que tem o número de parâmetros correspondente ao número de
selectores listados anteriormente e cada um desses caras os dados que forem referidos para o
selector aparecerão como variáveis do parâmetro da função você pode usar para poder retornar o
valor que você quiser desse selector esse selector é memoizado um criado select significa que se
você tiver a mesma entrada né esse cara bandos reaixo bandos lista foi o mesmo depois da primeira
vez que esse selector foi executado ele não vai executar o corpo do setor novamente ele vai usar
o valor que foi computado anteriormente para mesma entrada
é memoizado
tá
então normalmente o criado select usado quando você tem a composição de selectores se você
tem um selector bem simples bem simples que você só faz pegar por exemplo bandas reaixo só pega
a state bandas bandas esse é um selector simples que você não precisa usar o criado selector que é só
retornar a state bandas bandas não precisa de criado selector selector quando você vai fazer um
selector que usa a composição para que usa o selector certo
e voltando aqui só no documentação quando você olhar o reselect tá ele usa as funções definições
de funções de maneira curta tá em retorno eplista olha que ele define os selectores assim mas é a
coisa que eu fiz aqui eu fiz maneira explícita com retorno explícita tá pra poder clarificar o que é
os caras mas eles aqui na documentação ele usa dessa maneira aqui tá o retorno implícita
mesma coisa tá
certo
Então, por essa aula é só, espero que tenham gostado, você pode usar o re-selectar para
fazer os seus seletores memoizados para não ter que fazer computação dos valores novamente,
toda vez que o maps.tiprops for chamado.
Então, deixe-o como exercício, você pode fazer o, você pode tornar o bando o favorito
seletor, um seletor memoizado usando o re-select, tá?
Então, por essa aula é só e até a próxima.
