O Conceito de Seletores no Redux

Muitos aplicativos de React hoje em dia usam o Redux para a gestão dos dados do aplicativo.

Os dados são armazenados em uma única store, também chamada de Estado do Aplicativo. Essa entidade é, na maioria dos casos, nada mais nada menos que um simples objeto de JavaScript, com propriedades indexadas por uma chave e que tem um valor correspondente.

Normalmente o objeto do Estado é dividido em varias subseções, cada uma responsável, por exemplo, por um recurso diferente do aplicativo.

A função connect() do módulo de npm react-redux é normalmente usada para disponibilizar partes do Estado do Aplicativo via props passadas ao componente alvo.

Por exemplo:

const mapStateToProps = state => {
  return {
    propriedade1: state.recurso1.propriedade1,
    propriedade2: state.recurso2.propriedade2
  };
}

connect(mapStateToProps)(MeuComponente);

Para acessar propriedade1 e propriedade2, sempre temos que fornecer ao mapStateToProps o caminho para achar os dados: state.recurso1.propriedade1 e state.recurso2.propriedade2, respectivamente.

Vários componentes podem ter que requerir esses dados, então teríamos que escrever os caminhos de acesso numeras vezes.

Se um dos caminhos mudar, todos os componentes terão que ser atualizados com o novo caminho.

Para evitar isso, podemos criar seletores: simples funções que tomam o state como argumento, seguem o caminho requerido, e finalmente retornam os dados correspondentes:

const propriedade1Seletor = (state) => {
  return state.recurso1.propriedade1;
}

const propriedade2Seletor = (state) => {
  return state.recurso2.propriedade2;
}

Esses seletores podem ser armazenados em um arquivo e exportados para todos os componentes que precisarem acessar a parte do Estado do Aplicativo correspondente ao seletor.

Partindo do exemplo anterior, um certo componente que precisasse acessar os dados propriedade1 e propriedade2 teria que usar:

const mapStateToProps = state => {
  return {
    propriedade1: propriedade1Seletor(state),
    propriedade2: propriedade2Seletor(state)
  };
}

Agora se o caminho de cada recurso mudar, só é preciso mudar o código do seletor. Não precisa mudar nada nos componentes que usam o seletor. A lógica de percorrer o caminho para achar os dados está encapsulada na implementação do seletor.

Para aprender mais sobre seletores com React and Redux, assista às aulas no NBK Mundo Tech: