Gerenciamento de estado — Redux

Igor L Sambo💙🇲🇿
GDG Maputo
Published in
3 min readMay 26, 2020

Por esta altura já somos experts em gerenciamento de estado, mas ainda há mais opções e esta é óptima quando se pretende actualizar estados globais de uma aplicação deixando este disponível para aceder de qualquer ponto de nossa aplicação.

Este artigo faz parte de uma série de 5 artigos que vão abordar vários padrões de gerenciamento de estado.

  1. State Management — Introdução
  2. State Management — Provider
  3. State Management — Bloc
  4. State Management — Redux (este artigo)
  5. State Management — Mobx

Redux

Redux é uma técnica de gerenciamento de estados unidirecional que permite a partir de um reducer quando disparada uma acção, quer interna ou externa ao utilizador pegar no estado actual e substituir e um Store que irá manter o mesmo disponível para a view. É uma abordagem bastante útil para modelos de aplicações onde o dado é necessário em vários escopos e depende de uma determinada acção para mudar o estado de um widget. De modo geral, o reducer pega no estado actual e na acção que recebe de modo a actualizar o estado da aplicação que será então obtido em um store.

Isto, porém, aplica-se quando este modelo de aplicação não depende de dados externos como uma API, para que este conceito seja aplicado no contexto de dados externos tem-se o conceito de middleware que irá permitir a partir da acção lançada accionar então esta “fonte” de dados retorná-los ao reducer que por sua vez irá fazer com que o Store mantenha este novo valor de modo a actualizar a view.

https://blog.novoda.com/content/images/2018/03/redux-architecture-overview.png

Entendendo melhor o Redux

Voltando mais uma vez à nossa organizada empresa, imaginemos os mesmos actores sendo que desta vez temos a view os nosso executivos, o reducer o nosso porteiro que vai pegando no estado actual e o secretário irá então pegar nestes dados (os visitantes) e alterar o estado de “sem visitas” para “visitas” e guardar de modo que a view quando necessitar então pegar nos mesmos e mostrar na view.

Como implementar o Redux?

As bases do Redux são as expressadas anteriormente e sua implementação segue este mesmo escopo bastando para tal adicionar as seguintes dependências ao nosso querido pubspec.yaml:

flutter_redux: ^0.6.0
redux: ^4.0.0

Mas porquê duas dependências?

O redux possui apenas componentes expostos acima como reducer, entre outros. O flutter_redux possui implementação do redux aplicado em widgets (lembremos que em flutter tudo são widgets) e aplica conceitos como o StoreProvider e o StoreBuilder que fornece e recebe um widget, respectivamente.

Na Prática

Nota: Pode contribuir o projecto completo no meu repositório do github.

Espero que tenha aprendido com este artigo e que se tenha divertido enquanto lia.

Obrigado por acompanhar até ao fim e espero por você nos próximos artigos.

Para questões e sugestões esteja a vontade para tal nos comentários, email igorlsambo1999@gmail.com ou twitter @lsambo02.

Obrigado e até ao próximo artigo!!!

--

--