Redux: uma introdução amigável. Entendendo seus pontos principais

Compartilhe

Compartilhar no facebook
Compartilhar no google
Compartilhar no twitter
Compartilhar no linkedin

O Redux é um tema muito complexo na comunidade de Front-end, muita gente em diversas situações “caiu de paraquedas” em uma aplicação React que tinha Redux.

Outros nem tinham entendido direito como funcionava o React e já tinham que aprender outras sopas de letrinhas: Dispatchers, actions, reducers, store… O intuito desse artigo é dar um passo atrás disso tudo e explicar os fundamentos do Redux, passo a passo.

Antes de focarmos no Redux, temos de entender de onde ele veio e porque ele surgiu, para isso vamos falar um pouquinho do seu antecessor, o Flux. Apresentado ao mundo em 2014 durante a F8, o Flux é uma arquitetura de aplicações front-end que utiliza do fluxo de dados unidirecional das aplicações.

redux01

O principal problema endereçado pelo arquitetura Flux é simplificar as cadeias de eventos e comunicação entre componentes no front-end. E o exemplo usado na talk de apresentação no Facebook foi sobre uma arquitetura MVC (Mode-View-Controller).

Imagine que você tenha diversos componentes em sua interface, que tenha de ouvir um certo conjunto de dados ao mesmo tempo e que tenha que atualizar esses dados? Agora imagine você construir a página principal de uma rede social, que possua chat e que tenha no topo da tela um indicador de mensagens não lidas?

O Facebook teve todos esses problemas e a forma de simplificar isso foi utilizando do fluxo de dados unidirecional das aplicações.

redux02

A imagem acima ilustra como se dá o fluxo de dados no Flux. A Action aciona o dispatcher, que por sua vez altera a Store, que por sua vez reflete na View (podemos considerar as View como React Componentes) através de eventos.

Inclusive alguns dos jargões utilizados no Redux, vieram do Flux. Tal como Action e Store. Além de ser um tipo de arquitetura, o Flux também é o nome da biblioteca que a implementa, você pode dar uma olhadinha no Github.

Agora sim, vamos falar do Redux.

Criado em 2015 por Dan Abramov e Andrew Clark (ambos membros do core team do React), o Redux é uma implementação do Flux, que cresceu de popularidade rapidamente, principalmente por simplificar alguns aspectos do Flux e por ser focado um pouco mais em aspectos da programação funcional e na imutabilidade. 

Vamos aos conceitos principais:

O estado da sua aplicação, conhecido como Store, é basicamente um objeto contendo várias informações a respeito da sua view. Exemplo:

redux03

Na imagem acima, temos uma lista de tarefas (todos) em que cada elemento possui um texto e um estado (se está completo ou não), também temos mais uma informação que é sobre um filtro de visibilidade.

Para mudar algo na aplicação, você precisa disparar (dispatch) uma action. Uma action é um objeto simples, composto necessariamente de um identificador, chamado de type, e de dados relacionados a essa ação.

Capture

No caso da imagem acima estaríamos realizando três ações:

  • Adicionando um novo item na lista de todos, com o texto Go to swimming pool
  • Marcando o todo de índice 1 como completado
  • Alterando o filtro para mostrar todos os todos (inclusive os completos).

Percebam como é declarativa cada alteração no nosso estado, e também como é possível determinar no estado final da aplicação seguindo as actions.

Temos as actions declaradas, mas como de fato a alteração se dá na minha store?

Nisso que entra um outro conceito do Redux, chamado de reducer. O reducer é uma função que irá “ouvir” as suas actions e disparar alterações na sua store.

redux04

No código acima, temos suas functions uma chamada de visibilityFilter e outra de todos. Cada uma dessas funções é considerada um reducer, ela recebe como parâmetro uma action e a partir disso deriva um novo estado na aplicação.

Deriva um novo estado? Como assim?

O redux tem como um dos seus conceitos principais a imutabilidade, por isso toda vez que uma action é disparada o reducer constrói um novo estado e o retorna, em vez de modificar o estado atual diretamente.

Agora vamos unificar esses reducers para construir o estado da nossa aplicação

redux05

Disclaimer: Os exemplos citados acima foram tirados da documentação do Redux, e explicaram de forma alto nível o seu funcionamento, não utilizando de métodos ou APIs.

Podemos resumir o Redux em três princípios principais:

1 – A sua store deve ser a sua única fonte da verdade. Isso significa que todos os seus componentes devem “ouvir” da store as informações necessárias.

2 – O estado é somente leitura. A única forma de mudar qualquer coisa no seu estado é disparando uma action, nenhum evento do DOM ou de rede pode mudar diretamente o seu estado.

3 – As alterações no estado são feitas através de funções puras. Seus reducers são somente funções puras (retornam sempre o valor para o mesmo argumento e não possuem efeitos colaterais), que recebem o seu atual estado e uma action e retornam um novo estado.

Espero que tenham entendido um pouco como funciona o Redux, o que significa essas sopas de letrinhas e jargões e que agora vocês possam se aventurar um pouco mais na documentação e nos exemplos. Até o próximo artigo!

Referências: 

https://redux.js.org/introduction/core-concepts

https://redux.js.org/introduction/three-principles

https://facebook.github.io/flux/docs/in-depth-overview

https://github.com/facebook/flux

https://youtu.be/nYkdrAPrdcw?list=PLb0IAmt7-GS188xDYE-u1ShQmFFGbrk0v

https://stackoverflow.com/a/32920459

Bruno Vinicius

Bruno Vinicius

Bruno Vinícius, graduado em Sistemas de Informação pela PUC-MG, atualmente trabalhando como Front-end na Movilepay. Adorar ler (principalmente ficção científica), é um assíduo ouvinte de música eletrônica e é louco por pão de queijo e doce de leite.

Deixe um comentário

%d blogueiros gostam disto: