Se você está considerando os benefícios do Redux este é o artigo para você.

Vivemos um momento com muitas novas bibliotecas e ferramentas para usar no desenvolvimento de software. Com o número de ferramentas e bibliotecas disponíveis no mercado (uma biblioteca JavaScript provavelmente foi lançada antes de você terminar de ler isso), pode não ser a coisa mais sensata a se aderir a todas as novas, sem entender os benefícios ou o porquê de usá-la.

Redux não é novo e é bastante popular. No entanto, se você não tem idéia do que é o Redux e deseja saber por que usá-lo, este artigo é para você. Mesmo se você souber o que é Redux, mas ainda assim se perguntar se está fazendo uma escolha sábia usando-o em seu aplicativo, este artigo também é para você.

Neste artigo, consideraremos alguns motivos pelos quais você deve usar o Redux discutindo seus benefícios. Primeiro, entenderemos o básico do Redux e como ele funciona. Vamos ver como o uso do Redux pode ajudá-lo em seu aplicativo usando um componente simples, mas prático.

O que é o Redux?

Redux é um contêiner de estado previsível para aplicativos JavaScript. Ele ajuda a escrever aplicativos que se comportam de maneira consistente, executados em diferentes ambientes (cliente, servidor e nativo) e são fáceis de testar. https://redux.js.org/

Simplificando, o Redux é uma ferramenta de gerenciamento de estado. Embora seja usado principalmente com o React, ele pode ser usado com qualquer outra estrutura ou biblioteca JavaScript. É leve em 2 KB (incluindo dependências), para que você não precise se preocupar em aumentar o tamanho dos ativos do seu aplicativo.

Com o Redux, o estado do seu aplicativo é mantido em uma loja e cada componente pode acessar qualquer estado necessário a partir desta loja. Vamos nos aprofundar um pouco mais para ver por que você pode precisar de uma ferramenta de gerenciamento de estado.

Para ilustrar de uma forma bem fácil de entender, conheça o Sr. e a Sra. Componente (créditos da história e das imagens em Inglês: https://almerosteyn.com/2016/08/redux-explained-again):

Sr. e Sra. Component moram em uma cidade chamada Web Town. Web Town fica perto do mar e decidiu que queria uma nova e brilhante beira-mar. Todos os cidadãos estavam trabalhando duro para fazer isso acontecer.

Infelizmente, o conselho da Web Town achou que bastava muita gente e entusiasmo suficiente para fazer isso acontecer sem nenhuma forma de coordenação.

As pessoas fariam novos bancos ou guarda-chuvas ou qualquer coisa que você esperaria encontrar em uma bela praia e simplesmente instalariam. Se você não gostou do balcão da barra instalado por alguém, pinte-o de azul.

Enquanto isso, as notícias das mudanças na orla da praia dependiam da vinha para alcançar todos os cidadãos.

Obviamente, os esforços de muitos cidadãos da Web Town logo começaram a ficar assim:

Linhas de comunicação cruzadas e alterações muito ineficientes à beira-mar estavam na ordem do dia e a beira-mar da Web Town logo começou a ficar assim:

Web Town estava com problemas. Muitos cidadãos estavam tentando fazer mudanças semelhantes às da praia, bancos estavam sendo instalados onde o carrossel deveria ir, dinheiro estava sendo desperdiçado e mais de um soco se seguiu.

Algo tinha que ser feito. então, após uma reunião de emergência do conselho da cidade, decidiu-se chamar ajuda profissional. O que a Cidade da Web precisava era de uma coordenação séria. E foi assim que nasceu a Fábrica de Beira-mar Redux

A primeira questão que precisou ser resolvida foi garantir que todos os esforços dos cidadãos fossem canalizados somente através da loja.

Para fazer isso, a loja definiu algumas regras:

Sempre que alguém fazia qualquer coisa que fosse instalada, era necessário trazê-lo para a loja e não instalá-lo diretamente. Aqui o item seria agendado para instalação e, no momento apropriado, seria habilmente instalado.

Toda a comunicação era feita através da loja. Todas as informações sobre o andamento da orla e as alterações a serem feitas foram para o departamento de comunicação da loja. Aqui poderia ser arquivado com segurança, mas o mais importante é que todas as alterações na praia foram instantaneamente comunicadas a todos os cidadãos.

E, finalmente, como o CEO da fábrica era aluno da escola de magia de Hogwarts, ele introduziu um pouco de mágica. Para garantir que eles pudessem recriar facilmente a beira-mar a qualquer momento, ele gritaria algo como “REDUXO !!” e criaria uma nova cópia da beira-mar todas as vezes antes de fazer a alteração.

Isso levou a um sucesso retumbante! A nova loja não apenas garantiu a criação de uma linda praia, mas também economizou tempo e dinheiro para cada cidadão!

Por que você precisa de uma ferramenta de gerenciamento de estado

No começo deste artigo, deixamos claro que o Redux é uma ferramenta de gerenciamento de estado, mas agora vamos considerar por que você pode precisar de uma ferramenta de gerenciamento de estado.

A maioria das bibliotecas, como React, Angular etc., é criada com uma maneira de os componentes gerenciarem internamente seu estado sem a necessidade de uma biblioteca ou ferramenta externa. Ele funciona bem para aplicativos com poucos componentes, mas à medida que o aplicativo cresce, o gerenciamento de estados compartilhados entre os componentes se torna uma tarefa árdua.

Em um aplicativo em que os dados são compartilhados entre componentes, pode ser confuso saber realmente onde um estado deve morar. Idealmente, os dados em um componente devem residir em apenas um componente. Portanto, o compartilhamento de dados entre os componentes irmãos se torna difícil.

Por exemplo, no React, para compartilhar dados entre irmãos, um estado precisa residir no componente pai. Um método para atualizar esse estado é fornecido por esse componente pai e passado como suporte para esses componentes irmãos.

Imaginemos um exemplo simples de um componente de login no React. A entrada do componente de login afeta o que é exibido por seu componente irmão, o componente de status.

� Lembre-se, esses dados não são necessários pelo componente pai, mas como seus filhos precisam compartilhar dados, eles precisam fornecer um estado.

Agora imagine o que acontece quando um estado precisa ser compartilhado entre componentes que estão distantes na árvore de componentes. O estado deve ser passado de um componente para outro até chegar onde é necessário.

Basicamente, o estado terá que ser elevado ao componente-pai mais próximo e ao próximo até chegar a um ancestral comum aos dois componentes que precisam do estado e depois ser transmitido. Isso torna o estado difícil de manter e menos previsível. Isso também significa passar dados para componentes que não precisam desses dados.

É claro que o gerenciamento de estado fica confuso à medida que o aplicativo fica complexo. É por isso que você precisa de uma ferramenta de gerenciamento de estado como o Redux, que facilita a manutenção desses estados. Vamos ter uma boa visão geral dos conceitos de Redux antes de considerar seus benefícios.

Com o Redux, há um estado geral na loja e cada componente tem acesso ao estado. Isso elimina a necessidade de passar continuamente o estado de um componente para outro.

Ao usar o Redux com React, os estados não precisarão mais ser levantados, portanto, fica mais fácil rastrear qual ação causa qualquer alteração. Como visto acima, o componente não precisa fornecer nenhum estado ou método para que seus componentes filhos compartilhem dados entre si. Tudo é tratado pelo Redux. Isso simplifica bastante o aplicativo e facilita a manutenção.

Um outro grande benefício do Redux é adicionar orientações para dissociar “o que aconteceu” de “como as coisas mudam”. No entanto, você só deve implementar o Redux se determinar que seu projeto precisa de uma ferramenta de gerenciamento de estado.

Estes são os principais benefícios e o motivo pelo qual você pode usar o Redux, no curso de Redux aqui da Platzi explicamos todos os benefícios, e ensinamos a identificar o momento certo de utilizá-lo ou não.

Embora o Redux tenha seus benefícios, isso não significa que você deva adicionar o Redux em todos os seus aplicativos. Seu aplicativo ainda pode funcionar bem sem o Redux.