Introdução ao Redux (com ReactJS)

Olá leitor, seja bem vindo a parte dois da jornada do desenvolvedor ReactJS 🥳

Aqui você vai aprender a usar uma biblioteca bastante conhecida responsável por controlar o estado global da sua aplicação, o REDUX!

Antes de continuar, eu tenho uma informação super importante para você 🤗

⚠️ De fato, é realmente necessário que você tenha passado pelas lições da jornada do ReactJS (com Javascript), e se este não foi o seu caso, basta começar por aqui ⚠️

A leva de conteúdos a seguir, vão te ensinar o uso da biblioteca Redux em conjunto com o ReactJS, logo, é bom que você tenha uma certa afinidade com ele.

Cumpriu o requisito acima? Então partiu aprender REDUX 💜

O que é o REDUX?

O Redux é uma biblioteca que não faz parte do ReactJS - e por isso precisa ser instalada a parte -, que nos possibilita controlar e gerenciar o estado das nossas aplicações feitas com Javascript, se tornando bastante útil para controlar a interface de usúarios complexas e interativas.

E sim, o Redux pode ser instalado em aplicações construídas com puro e simples Javascript.

Apesar disso, essa biblioteca é frequentemente usada em conjunto com outras bibliotecas de UI como é o caso do ReactJS e Angular. Mas também pode ser usada de maneira independente.

O que o Redux resolve?

Com o Redux nós conseguimos ter um controle melhor dos estados globais da nossa aplicação.

Em aplicações maiores feitas com ReactJS, pode ser um tanto quanto complicado manter o estado distribuido entre vários componentes.

Quando eu falo de Redux e estados globais, gosto de pensar no player de música do bandcamp, soundcloud e também do spotify.

Você já percebeu que apesar da mudança de página, o player ainda continua tocando a mesma música?

É engraçado como a música não para de tocar nem por um segundo, a impressão que fica é que uma parte da aplicação nunca sofre as influências de uma atualização de páginas...

E sim, ela está sendo controlada globalmente 😋

Mas se eles estão usando o próprio Redux para isso... aí já é outra história rs

A verdade é que aquele player de música, nada mais é do que um componente que está presente em todas às páginas que nós clicamos, ou seja, ele é um componente global.

E a ideia do Redux é justamente essa, controlar o estado global das nossas aplicações.

Daí você pode me perguntar: Mas o Context API já não faz isso?

Redux VS Context API

Apesar do Redux e o Context API do próprio ReactJS terem propósitos semelhantes, onde ambos são capazes de controlar o estado global da aplicação.

Existem algumas diferenças importantes entre eles. Com relação ao Redux podemos destacar os seguintes pontos:

Mantém o estado da aplicação em um único objeto chamado store.
O estado do Redux é imutável.
Todas as alterações feitas nele são atráves de funções puras chamadas de reducers.
O redux segue o padrão de fluxo de dados unidirecional, o que facilita o rastreamento das mudanças e depuração.

Além disso, o redux tem suporte aos middlewares, que podem ser usados para lidar com tarefas assíncronas, logging, roteamento e outras lógicas complexas.

Se tornando particularmente útil em aplicações que precisam interagir com APIs externas, ou realizar operações assíncronas complexas.

Já com relação ao Context API, nós temos outros pontos, como por exemplo:

Ele permite compartilhar dados globalmente dentro da árvore de componentes em ReactJS.
Fornece um mecanismo de Provider e Consumer para acessar e passar os dados na árvore de componentes.

Não só isso, como o Context API é mais adequada para casos em que o estado global precisa ser consumido por um número limitado de componentes, ou quando o estado é simples e não requer uma gestão complexa.

Mas qual dos dois eu devo escolher na minha aplicação?

Redux ou Context API?

A escolha entre essas duas funcionalidades, depende exclusivamente da complexidade do gerenciamento do estado da sua aplicação, e também da escalabilidade dela.

Usamos o Redux quando a aplicação possui um estado global complexo, com muitos componentes interagindo e modificando o estado de forma sofisticada.

Em casos como esses, o Redux é geralmente preferível devido à sua estrutura organizada e previsível.

Usamos o Context API em aplicações menores ou em casos em que o estado global é gerenciado de forma simples, e não exige um gerenciamento avançado.

Em casos como esses, o Context API é preferível pois pode ser mais simples de implementar e manter.

Apesar disso, eu separei 3 perguntas chaves que podem te dizer se você precisa do Redux na sua aplicação ou não:

O seu estado tem mais de um dono? Isto é, existem muitos componentes que o chamam?
O seu estado é manipulado por mais componentes? Ou seja, muitos componentes diferentes podem realizar mudanças nesse mesmo estado?
As ações que o usuário faz em outros componentes da sua aplicação, causariam efeitos nesses estados?

Se a sua resposta for sim para todas, existe 90% de chance de você precisar do REDUX 💜

Como funciona a Arquitetura do Redux?

Pegando como exemplo uma aplicação de player de música, vamos começar dando uma olhada na ilustração acima, e vamos às explicações 🧐

Tudo começa com o componente da página de playlist, aonde conta um um botão de Play (▶︎), que ao ser pressionado, executa uma ACTION do Redux.

Uma Action nada mais são do que objetos que descrevem um determinado fato ocorrido. No nosso caso, a action conta obrigatoriamente com um type, e pode conter outros tipos de dados, como por exemplo:

{
 type: "ADD_NEW_MUSIC",
 playlist: {
 name: 'Kaji - Forever',
 status: 'playing',
 duration: '03:08'
 }
}

O type instrui o tipo de ação que está acontecendo, e a chave playlist contém os objetos que o nosso player de música pode usar.

Alí dentro do Action podemos declarar quantas chaves nós quisermos, desde que o type sempre esteja presente.

Após isso, esse objeto é salvo dentro do Redux Store, que é um objeto global que armazena todos os estados globais da aplicação.

Dentro do Redux Store temos nossos Reducers, que são funções puras e específicas para lidar com cada um dos estados globais que a nossa aplicação pode gerenciar.

No caso da ilustração acima, nós temos o Player Reducer que armazena os estados relacionados ao nosso player de música, e o User Reducer, que armazena os estados relacionados ao nosso usuário (nome, email, roles e outras informações que queremos salvar).

Por fim, temos o componente do Player em sí, que fica escutando as alterações que acontecem no Reducer de modo a se atualizar de forma automática.

Bem simples, não?

Quais são os componentes principais do Redux?

Apesar do Redux ser uma biblioteca a parte, seus componentes pode ser agrupado de forma bem simples.

Store: É o objeto que contém o estado global da aplicação. É possível acessá-lo, atualizá-lo e registrar ou desregistrar ouvintes.

Actions: São objetos que descrevem o que aconteceu. Elas são a única fonte de informação para o store.

Reducers: São funções puras que especificam como o estado da aplicação muda em resposta a uma action. Cada reducer trata uma parte do estado da aplicação.

Middleware: É opcional, mas permite estender o Redux para lidar com tarefas assíncronas, registro de ações, roteamento, etc.

Veremos o funcionamento de cada um desses componentes em lições futuras 😉

Conclusão

Nesta lição você aprendeu a parte teórica do funcionamento da biblioteca do Redux.

Na próxima lição aprenderemos a instalar essa biblioteca na nossa aplicação, e fazer algumas configurações iniciais 🙃