DEV Community

Cover image for Front-End e o gerenciamento de estado global
Edvaldo Lima
Edvaldo Lima

Posted on • Updated on

Front-End e o gerenciamento de estado global

As bibliotecas Flux são como óculos: você saberá quando precisar delas. Dan Abramov, o autor do Redux.

E aí carinha do computador. Como que anda a vista? E os óculos? Tudo em dia?

Eita, o gerenciamento de estado global! Já ouvi falar muita coisa sobre ele:

  • "Você só usa quando precisa passar dados de irmão para irmão(componentes) para facilitar a vida"
  • "Só usa quando a hierarquia entre os componentes fica muito distante"

Vamos cortar o papo, do que é, onde vive, do que se alimenta, etc. E vamos focar no propósito de existência do gerenciamento de estado global em um projeto.

Veja:

Vuexfonte

Antes de qualquer coisa, vamos falar do Vuex, mas isso pode se aplicar as bibliotecas que fazem uso do Flux Pattern, para aquele seu projeto de 5 páginas, ou qualquer coisa nesse sentido, provavelmente não fará sentido algum adicionar gerenciamento de estado global, inclusive, é uma recomendação do Vuex, Redux.

Se o seu projeto consome uma API, ele já poderia fazer o uso do gerenciamento de estado global! "Mas pera, e a história do projeto de 5 páginas?", é simplesmente uma escolha! Deve se considerar os prós e contras do uso em seu projeto.

Mas vamos ao propósito, viu a imagem ali em cima e o que cada camada faz? Vamos lá!

  • Actions: A camada que tem como responsabilidade a comunicação com a API do projeto.
  • Mutations: A camada que tem como responsabilidade modificar estados.
  • Getters: A camada que tem como responsabilidade facilitar a busca dos dados de um estado.
  • State: A camada que tem como responsabilidade armazenar o estado.

Com o gerenciamento de estado global, a aplicação irá centralizar os dados vindos da API no State fazendo com que qualquer componente tenha acesso aos dados, da mesma forma as chamadas de API ficam ao alcance de qualquer componente por meio do Vuex, como à qualquer outra camada, e sim, as Actions seriam um tipo de "Services", centralizando todas as chamadas de API. Claro, você não irá guardar apenas os dados vindos da API, poderá adicionar qualquer dado de interesse global ou de contexto.

Conclusão

Para pequenos projetos, mesmo com consumo de API, o gerenciamento de estado global pode parecer verboso e desanimador, mas na minha opinião o uso se paga e muito bem ao longo do projeto, você sabe de onde vem os dados, são modificados de forma previsível e isso ajuda muito na manutenção.

Top comments (0)