Esse artigo tem como objetivo esclarecer como as coisas funcionam no Redux. Então, se assim como eu, você precisa de alguns exemplos, analogias e até mesmo uma definição mais exata, vou tentar resolver esse problema agora!

Prontos? Então vamos lá!


Redux

O que é o Redux

Redux é uma biblioteca feita para gerenciar estados em uma aplicação, ela tira a responsabilidade de um componente ter um estado que poderá ser usado por vários outros componentes dentro da sua aplicação e passa isso para um objeto global, que pode ser acessado por qualquer componente, a qualquer momento.

Qual o Problema que o Redux Resolve?

Você já ouviu falar de State Dealing? Imagine que você tem um estado em um Componente A que compartilha esse mesmo estado com seus filhos. Até ai tudo bem, certo? Você passa esse estado por props para os filhos e segue caminhando, cantando e seguindo a canção!

Mas e se você tem um Componente B, que faz parte de outra arvore de componentes que não chega nem perto do Componente A?

Como passar o estado do Componente A para o Componente B? Ai as nuvems já ficaram cinzas, o dia já não parece mais radiante e toca aquela música de triste de fundo, né?

Bom, o Redux veio exatamente para acabar com esses dias tristes! Ele vai literalmente criar um enorme objeto global contento todos os estados que precisam ser acessados por diversos componentes que não tem uma ligação entre si!

Ficou claro? A imagem abaixo pode deixar isso mais evidente!

https://miro.medium.com/max/500/1*zTXY3OfZm5nreThL4lnu4A.png

Explicando a imagem acima: Sem o Redux, você precisa fazer várias pontes para compartilhar um estado no componente do topo da sua arvore até chegar nos componentes mais baixos. Já com o Redux, isso não é necessário, os estados ficam flutuando fora da aplicação, prontos para ser acessados por qualquer componente que queira alterar ou lê-los. Legal, né?