Tornando o gerenciamento de estado mais simples com Containers
Nas últimas semanas estou usando React Context pra gerenciar o estado das minhas apps. Estou bem satisfeito, e isso significa muito, porque quase nunca fico satisfeito com meu código.
Pretendo escrever um novo post pra explicar com mais detalhes as técnicas que utilizo, inclusive criei uma biblioteca opensource, mas, como todo bom programador, ainda não documentei o uso, vou aguardar mais algumas semanas porque ainda estou polindo a API.
Neste post gostaria de compartilhar um feedback que é provavelmente controverso. Mesmo que você não goste do pattern que vou propor, por favor comente com suas considerações, pode ser útil pra eu reavaliar algum ponto que não estou considerando.
Na minha experiência, debugar, manter ou extender estado (apenas estado que é compartilhado por vários componentes, estado local num determinado componente está fora desta equação) em níveis mais baixos na árvore de elementos é sempre uma dor de cabeça porque é díficil processar facilmente o data flow e todas as mutações que podem acontecer numa determinada tela.
Geralmente precisamos navegar entre vários componentes, quase sempre em níveis bem distantes na árvore de elementos, entender o estado que cada componente está consumindo ou mutando, e então processar tudo no nosso cérebro de péssima memória curta (eu tenho péssima memória curta, espero que você seja diferente 😅).
Isso gera dificuldade na hora de debugar, extender ou manter uma determinada feature.
Para resolver este problema, utilizo o conceito de Containers. Um Container funciona como um store do Redux, porém ele compreende apenas uma determinada feature, alguns exemplos seriam AuthContainer, ShoppingCardContainer, etc.
Estes Containers são utilizados apenas por Screens, uma Screen é um componente que utiliza outros componentes pra criar uma determinada tela do sistema. Segue um exemplo:
Podemos perceber no exemplo que a única parte "inteligente" da tela é o AuthContainer, todos os outros componentes são apenas componentes de apresentação. Qualquer desenvolvedor entende com facilidade o que está sendo consumido e as possíveis mutações que podem ocorrer sem a necessidade de ficar navegando entre componentes.
Isso facilita muito quando você precisa debugar, extender ou manter uma determinada feature.
Obviamente este é um exemplo simples, existem telas que são mais complexas e exigem que você seja mais criativo para que consiga manter este pattern.
Pretendo escrever mais posts com mais exemplos real world de como consigo manter esta ideia para telas mais complexas.
Por enquanto, este é apenas um deleite inicial, porém sinta-se a vontade para achar que isso tudo é uma 💩 se você não gostou.
Por favor deixe seu feedback nos comentários! 👨💻
