Um momento
Aula 12
Cursos / O Conceito de Seletor (Selector) - React & Redux
Aprenda a Usar a Biblioteca Reselect (Aula React & Redux)

Summary

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

Video Transcript

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