Como melhorar a comunicação do seu componente

Com o react enum

Em um projeto real, temos várias coisas para nos preocupar e lembrar. Tem que validar regra de negócio, criar um código com boas práticas, seguir a arquitetura definida, garantir uma boa cobertura de testes, acompanhar o deploy… e muitas outras preocupações que temos todos os dias.

À medida em que o projeto cresce, surgem vários componentes e suas definições de uso para melhorar o dia-a-dia do nosso desenvolvimento e a velocidade de nossas entregas. E com cada novo componente criado, tentamos ao máximo deixar os nomes das props o mais próximo possível da sua funcionalidade. Mas aí aparece o problema: quais são os valores que essas props esperam? 😕

Veja se isso já não aconteceu com você: você decide criar um novo componente e para isso define todas as props para que ele possa funcionar corretamente. Ali você já sabe os valores que deve passar para tudo funcionar.

Lindo! Neste momento tudo faz sentido, este é o componente mais coeso que você já fez, mas aí passa um, dois ou três meses e quando você vai usar esse componente … 😡 não lembra qual é o valor que deve passar para essa props!

O que todos nós fazemos é ir até o código fonte do componente e verificar o que devemos passar como parâmetro para que o componente se comporte da forma que eu espero. Mas isso vai demandar um certo tempo, uma vez que temos que abrir o código do componente e verificar qual é o valor que realmente devo passar. E isso pode até piorar se o código fonte deste componente estiver muito complexo!

E aí mora um grande perigo: os bugs.

Um problema muito comum que acontece quando passamos valores para uma props são valores em string digitados errado, por ortografia, ou até mesmo o uso de “camel case” ou “snake case”. E quando o valor esperado por uma props é um number, aí aparecem aqueles “belos” números mágicos no código, que ao longo do tempo têm cada vez menos sentido.

E como podemos resolver isso? 😐 É para isso que temos este post 😊.

Não precisamos sempre lembrar o que passar para um componente se comportar da forma que queremos, e também não precisamos saber se a string deve ser em “camel case” ou “snake case”, muito menos lembrar para que serve aquele “número mágico” jogado no meio do código. Tudo isso a gente resolve usando enum com react.

Enum é uma forma rápida e fácil de mostrar para os desenvolvedores o que podemos usar em um determinado trecho de código, o que facilita o desenvolvimento, padroniza o código e melhora a manutenção e refactory do seu projeto.

Para ver como funcionam os enuns em componentes react vamos criar um novo projeto chamado react-enum,

Partimos do pressuposto que você já tenha conhecimento mínimo em React e saiba iniciar um projeto com o create-react-app. Ok?

Vamos imaginar que estamos construindo uma interface de um e-comerce que, em determinado local, vai informar ao usuário a situação da sua compra. Para isso vamos criar um novo componente chamado situation.js.

Neste componente vamos retornar uma simples tag html span para informar a situação atual da compra.

Este componente vai ter duas props: a primeira vai informar a situação da compra e a segunda vai determinar o tamanho deste componente na tela do usuário. Vamos nomear essas props de status e size, respectivamente.

De acordo com a regra de negócio, para a props status temos as opções:

• aguardando aprovação;
• aprovado;
• embalando;
• transporte;
• entregue;

Para a props size, teremos os valores:

• small;
• medium;
• large;

Neste momento, nosso componente está assim:

Para estilizar nosso componente vamos criar um CSS simples, só para ajudar no nosso exemplo.

OK, tudo pronto! Vamos agora importar este componente na nossa aplicação.

E agora já deu para perceber os problemas que foram mencionados anteriormente… quais os valores que devo passar para este componente?

Vamos concordar, temos sempre que lembrar o que passar para a props status e ainda temos um problema maior… a entrada de novos desenvolvedores no time. Como eles vão saber qual o valor deverá ser passado e como tudo funciona? 😧.

Então vamos começar a padronizar este componente com os enums.

Para o primeiro exemplo, vamos padronizar a props size e para isso vamos criar um objeto chamado size (para fazer sentido, com o nome da props do componente). Neste objeto vamos colocar três opções, que são small, medium e large. Nesta parte de código estamos assim:

Ok, temos nosso componente e temos nosso objeto com os tamanhos determinados. Mas como juntar tudo isso e como determinar que minha props size só poderá receber valores do meu objeto size? Para isso vamos usar o PropTypes e o escopo de componente.

Com o PropTypes determinamos que a propriedade size só poderá receber valores contidos no objeto size, e para isso vamos adicionar o seguinte código:

E agora vem a cereja do bolo! Vamos usar o escopo do componente para exportar a variável size junto com ele, e para isso acontecer temos que adicionar esse trecho de código Situation.size = size no final do arquivo:

Neste trecho de código estamos declarando que meu componente possui uma variável chamada size, e esta variável é igual ao meu objeto interno chamado size.

Dessa forma, quando importarmos nossos componente Situation em alguma parte do projeto, junto com o componente também teremos uma variável com os tamanhos determinados 🙂.

Para testar essa funcionalidade vamos ao local em que importamos nosso componente Situation e vamos passar um valor para a props size.

Já sabemos que nosso componente Situation tem uma variável no escopo chamada size e que esta variável contém todas as opções de tamanho. Então, para usar esses tamanhos já determinados só precisamos adicionar dentro da props size o código Situation.size. e ver a mágica acontecendo.

UAUU! Já vão aparecer todas as opções disponíveis para essa props, e assim eliminamos vários problemas:

• não precisamos lembrar a regra de negócio para essa props;
• evitamos passagem de valores com string travada em todo o código;
• ajudamos novos desenvolvedores a entender o código da aplicação;
• melhoramos o refactory do projeto.

Esses são apenas alguns pontos de melhoria com essa simples funcionalidade nos nossos componentes, mas com certeza seu projeto vai se beneficiar de muitos outros ao longo do tempo.

Bom, agora que já padronizamos os valores para a props size, vamos fazer o mesmo para a props status, e para isso vamos seguir os mesmos passos:

1- criar um objeto dentro do componente com os valores determinados;

2 - configurar no PropTypes para que a props apenas receba valores contidos no objeto determinado;

3 - adicionar uma variável no escopo do componente, para deixar expostos todos os valores permitidos para essas props.

Seguindo esses passos, chegaremos neste ponto:

E agora é só alegria! 😁.

Voltamos ao local em que nosso componente Situation está importado e vamos passar um novo parâmetro. Desta vez vamos adicionar a props status, e agora já sabemos como tudo vai funcionar.

Esta forma de configuração é muito boa para abstrair alguma regra dentro do componente, ou seja, não é necessário passar exatamente o nome, podemos passar valores ou nomes menores para essa props. Por exemplo:

Não precisamos escrever status={Situation.status.aguardandoAprovação}, podemos criar nomes menores como status={Situation.status.aguardando}, ou status={Situation.status.waiting}, e dentro do componente eu posso validar ou refatorar meu código a qualquer momento, pois a comunicação já está estabelecida com os enuns.

Mas se você acha que escrever status={Situation.status.aguardandoAprovação} fica muito grande, podemos retirar a variável do escopo do componente e exportar diretamente nosso objeto, assim:

Com isso, devemos modificar o formato do import do nosso componente. Ao invés de só importar o componente devemos também importar os objetos para usarmos nossas props.

Você deve escolher a melhor forma para o seu projeto, o mais importante é que com essa simples funcionalidade podemos ter um código mais consistente e simples, com mais escalabilidade e melhor manutenabilidade. Ficou alguma dúvida ou tem algo a acrescentar? Deixe um comentário!

Se você quiser dar uma olhada no código no github é só clicar aqui.

Até a próxima!