Redux com Decorators? Quatro motivos para não usar
Quando comecei com Redux não entendia direito qual era a razão de ter que escrever em arquivos separados o componente e conector do Redux. Eu achava isso muito verboso e não via ganhos.
Quando vi os decorators no connect fiquei encantado pois era muito menos verboso, simples de ser usado e dava uma boa estética no código.
Porém o tempo e experiencia me mostrou as partes ruins: quando usamos os decorators temos que lidar com quatro problemas gigantes que para mim inviabilizam o uso dele. Resolvi escrever este artigo para que não caiam nos mesmos problemas que já tive e se atentem ao começar um novo projeto com Redux! Separei esses quatro problemas em tópicos por ordem de relevância:
- Dificulta os testes misturando conceitos
O decorator nos força a escrever o connect do Redux junto com a declaração do nosso componente, com isso misturamos o que é componente e o que é controle de estado. Na hora de escrever o teste não conseguimos testar apenas o componente sem ser obrigado a criar um mock do estado.
Um dos melhores ponto do Redux é a separação de conceito! A separação do estado numa única fonte de verdade, separação do controle do estado fora dos componentes e ele poder ser usado com React, Angular, VanillaJs. É uma parte linda do Redux. Isso também facilita muito os testes, abre espaço para testarmos somente o componente ou somente o Redux.
Testes unitários são extremamente importantes e conceitos separados ajudam muito na testabilidade do que estamos fazendo, com o connect num arquivo e o componente em outro sendo totalmente independentes não precisamos de mockar o estado para testar o componente: é só testarmos o componente. Simples, rápido, focado e objetivo!
2. Ainda não está na ES
Caso os decorators não sejam aceitos você vai ter que reescrever todo código que você já escreveu utilizando ele. Fora que a proposta pode mudar, ou seja, pode ser que futuramente ele seja aceito, só que funcionando de maneira totalmente diferente do que existe hoje. Isso pode fazer seus connects pararem de funcionar.
Quem quiser acompanhar o processo de entrada dos decorators na ES7 pode acompanhar por aqui: https://github.com/babel/proposals/issues/11
3. Não são feitos para isso
O connect é apenas uma função. O connect é feito para pegar algumas configurações, pegar seu componente e então devolver um componente novo, que vai renderizar seu componente com os dados da store do Redux. O connect é um high order component que é um pattern, já os decorators são syntax sugar que pode ser usado para isso porém não foram feitos para esta finalidade.
4. Dificulta reutilização
Quando utilizamos o connect no mesmo arquivo que nosso componente, estamos dificultando a reutilização dele. Ao criar os dois juntos perdemos a vantagem de poder mover a pasta do componente para outro projeto e ele funcionar lá. Isso acontece porquê adicionamos dependências ao componente, e quando levamos ele para outro projeto, e ele foi feito com o @connect estamos obrigando o projeto usar Redux, o babel ter suporte a decorators e o estado estar estruturado de forma parecida.
Quando não utilizamos decorators, nosso componente depende apenas do React! Basta colocar ele em outro projeto em React e não teremos dor de cabeça ajustando ele inteiro para funcionar como deveria.
Dado esses pontos negativos, não recomendo a ninguém começar um novo projeto utilizando decorators para realizar o connect do Redux. Até Dan Abramov, o próprio criador do Redux, não recomenda o uso.
Sempre que alguém começar um projeto com React e Redux e ter a ideia de salvar tempo com decorators, avise sobre os pontos negativos, assim não precisarão passar por as mesmas experiencias ruins que eu tive usando essa ferramenta.
