Um momento
Aula 02
Cursos / O Conceito de Seletor (Selector) - React & Redux
A Explicação (Aula React & Redux)

Summary

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

Video Transcript

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.
Nenhum comentário ainda (loading...)
Nenhum comentário ainda (loading...)
Gostou da aula? 😆👍
Apoie nosso trabalho com uma doação: