Aula 02
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: