10 Motivos Para Usar Redux em 2018
Porque usar o Redux em seu próximo projeto
Quando desenvolvemos aplicativos single-page em javascript, sempre temos que lidar com o gerenciamento de estado. Administrar o estado de uma aplicação é tão crítico que uma solução pobre pode colocar em risco a saúde de sua aplicação.
Por causa de problemas como este, a equipe de desenvolvimento do Facebook criou Flux.
O Flux é a arquitetura de interfaces que o Facebook utiliza para criar suas aplicações. O Flux complementa os componentes que podem ser combinados em uma interface, fazendo-os utilizar um fluxo de dados unidirecional.
O Redux, por sua vez, segundo seu criador (Dan Abramov), não é tão diferente do Flux.
No geral ambos possuem a mesma arquitetura, mas o Redux é capaz de eliminar algumas complexidades fazendo uso de uma composição funcional onde o Flux utiliza callbacks .
O Flux não é fundamentalmente diferente, mas acredito que o Redux torna suas abstrações mais fáceis, ou pelo menos possível de implementar, o que seria bem difícil no Flux.
O Redux é basicamente um container de estado previsível que leva as melhores partes da arquitetura Flux para uma conclusão lógica e eficiente
Seu objetivo é fazer com que as mudanças de estado sejam mais previsíveis.
Apesar de ser muito utilizado com React, o Redux também pode ser utilizado com outras bibliotecas. Como exemplos, podemos citar: Angular, Ember ou Dart.
Então, por que eu devo aprender Redux?
Bom, aqui na Getty/IO é comum encontramos clientes que passam pelo mesmo problema de gerenciamento de estado em suas aplicações.
Se você tem problemas de state em suas aplicações, provavelmente é porque você não tinha certeza onde o state estava sendo alterado em tempo de desenvolvimento, você não sabia que outras views e models também alteravam este mesmo state.
Imagine o seguinte exemplo de problema de gerenciamento do state:
Você possui uma View que pode atualizar um Model, e esse Model pode atualizar outro Model, o qual atualiza uma outra View, que poderia atualizar o mesmo Model.
Provavelmente, você ficará louco e perderá algumas horas resolvendo problemas deste tipo.
Você não sabe o que está acontecendo em sua aplicação, ela está lenta e tem problemas crônicos.
Se você passou ou passa por isso, provavelmente você já se perguntou:
Como posso evitar este tipo de problema no futuro?
A resposta é o Redux.
10 Motivos Para Usar o Redux na Sua Próxima Aplicação
Essa breve introdução é o suficiente para você entender qual é o diferencial do Redux. Agora, vamos ao próximo passo: descobrir porque vale a pena usá-lo no desenvolvimento das suas aplicações.
Em uma versão anterior desse mesmo post, nós destacamos 5 razões para usar o Redux. Como o conteúdo foi muito bem recebido pelos nossos leitores, decidimos ampliá-lo. Então, confira agora 10 motivos para usar o Redux!
1. Desenvolvimento Previsível
Com Redux, o state de sua aplicação é armazenado em uma árvore de objetos dentro do store. O store por sua vez é responsável por manter este state e disparar actions através do dispatch .
Para especificar como um state é transformado por uma ação, você precisa escrever um reducer (pure functions).
Resumindo: A única forma de realizar uma mutação no state, é emitindo uma ação descrevendo em um objeto o que aconteceu.
Redux/Flux Flow
Dessa forma, o Redux oferece um padrão sustentável para desenvolver aplicativos complexos e de larga escala, seja Web ou Mobile.
Você pode checar os três princípios do Redux. Mas é fortemente recomendável que você leia toda a documentação do Redux.
2. Ferramentas de Desenvolvimento
O Redux fornece ferramentas como hot reloading, time travel, record e replay por padrão. Isso também quer dizer que podemos facilmente implementar funcionalidades mais complexas, como contrl-z & control-y (desfazer & refazer).
3. Fácil Para Testar
Testes unitários com Redux são incrivelmente simples de serem feitos.
Eles podem ser divididos em 4 tipos:
- Action Tests
- Reducers Tests
- Middleware Tests
- Components Tests
Porque a maior parte do código que você escreve com Redux é composto por pure functions.
Como resultado, você apenas precisará criar objects mocks para os payloads que decidir testar.
4. Velocidade de Desenvolvimento
Uma vez que seu time tem o ambiente pronto para usar Redux, criar actions, reducers e middlewares se torna trivial, a reutilização de código se torna mais efetiva, os testes aumentam sua cobertura pois são simples de serem criados.
Como resultado, você notará que os componentes que criamos com React ficam melhor organizados e divididos entre Presentational and Container Components.
5. Permite simplificar o código do aplicativo
Em certos casos, dois componentes vão tentar dividir os mesmos dados. O problema é que, se esses componentes não estiverem próximos um do outro, o componente “ancestral” mais próximo terá que repassar os dados através de vários componentes intermediários.
Enquanto isso, o Redux resolve o problema, garantindo um armazenamento central que guarda dados de qualquer ponto da aplicação. Esse armazenamento é um objeto JavaScript. Então, os componentes podem se conectar individualmente à central e extrair os dados de que precisam.
Graças a essa funcionalidade do Redux, os dados não precisam mais ser repassados por vários níveis de componentes. Como resultado, o código do aplicativo fica mais simples e sua renderização, mais ágil.
6. Updates de Interface
Um bom motivo para usar Redux é que, em determinadas situações, ele elimina a necessidade de realizar updates de User Interface. Vamos entender o porquê.
O Redux inverte a responsabilidade de atualização da UI, de maneira que a UI não manipula o state. Em vez disso, você apenas envia uma mensagem(dispatch action) para que o reducer a interprete e realize a mutação do state.
Graças a essa inversão, a UI não precisa necessariamente passar por um re-render sempre que uma mutação ocorre. Além disso, funções complexas — como logging, undo e time travel debugging — passam a ser triviais. Para completar, testes de integração passam a ser necessários apenas para confirmar que a ação correta foi executada; todo o restante pode ser “unit-tested”, isto é, testado individualmente.
7. Integração com bibliotecas
Se você pesquisar sobre Redux, logo verá que ele não é recomendado em qualquer situação. O próprio Dan Abramov publicou um artigo no Medium dizendo que você pode não precisar dele (“You might not need Redux”). E o time por trás do Redux, além de outros especialistas em desenvolvimento, afirmam que você deve guardá-lo para certos casos especiais.
Mas, então, o que fazer em todos os casos que não são especiais?
É aí que a integração com bibliotecas vem a calhar. O Redux é flexível e integra-se facilmente a bibliotecas como redux-thunk, redux-saga, redux-logger, redux-offline, estas bibliotecas são capazes de lidar com os casos em que os recursos do próprio Redux não são suficientes ou adequados. É claro que isso significa que cada desenvolvedor pode, de certa forma, construir sua própria lib, juntado o Redux a outras “peças” de acordo com as necessidades do seu projeto.
8. Implementação simples
Para quem já está trabalhando com o Flux, por exemplo, implementar o Redux pode parecer um passo arriscado. Você tem receio de que o processo de migração do aplicativo seja extremamente trabalhoso e, talvez, até inviável. Você tem medo de que essa migração atrase suas atividades de desenvolvimento.
Todos esses temores são normais. Porém, você pode acabar com eles agora mesmo: o processo de migração para o Redux é muito simples. Se você está transicionando de Flux para Redux, pode descobrir tudo de que precisa sobre o processo neste artigo.
Mas segure a sua ansiedade, por que ainda não terminamos esse tópico! Além da migração em si, existe outro ponto importante: é preciso se adaptar ao Redux. Do contrário, todo o trabalho de levar seu aplicativo para este framework é inútil, certo?
Bem, pode relaxar. O framework é consideravelmente simples. Ele se resume a 100 linhas de código.
9. Ampla documentação
Quando você trabalha com desenvolvimento, precisa ter uma excelente capacidade de autoaprendizado. Afinal, sempre que um novo framework aparece, você aprende tudo sobre eles sozinho. Esse aprendizado fica muito mais fácil se você tiver acesso a uma documentação completa e detalhada.
Felizmente, esse é exatamente o caso do Redux. Você consegue encontrar uma ampla documentação sobre o framework online. Além disso, também há uma comunidade forte e ativa de desenvolvedores, que pode oferecer o suporte de que você precisa para começar a trabalhar com o Redux.
10. Curso Grátis (Feito pelo criador do Redux)
Se a documentação e a comunidade não forem suficientes para convencê-lo de que você pode dominar o Redux, nós ainda temos uma carta na manga para este artigo: um curso totalmente gratuito, produzido pelo criador do Redux.
Dan Abramov disponibilizou esse material no Egghead, e vale a pena conferir!
Conclusão
Embora o redux seja muito verboso e repetitivo, ele entrega ao desenvolvedor o poder de criar aplicações mais robustas e que possuem um padrão bem definido de implementação.
Com Redux é possível criarmos aplicações mais eficientes por default, embora a curva de aprendizado seja maior, o ganho de produtividade no desenvolvimento de aplicativos será considerável, uma vez que o seu entendimento seja alcançado.
Aqui na Getty/IO utilizamos a stack React / Redux / Graphql para o front-end das aplicações, seja React ou React Native (Aplicações Nativas iOS/Android).
Essa tem sido nossa receita para criar aplicações de alta performance, que muitas vezes nem precisam de servidores, que rodam 24/7 e sem interrupções.
Quer saber mais? Entre em contato com a gente!
Se você quer discutir ideias com a comunidade, compartilhar conhecimento e acompanhar as tendências, entre em nosso grupo no Facebook.
Connect
Se você tem desafios na sua empresa em relação à desenvolvimento de um PWA, envie uma mensagem para hello@getty.io, nós podemos te ajudar.
Juntos, imaginamos e criamos aplicações web e mobile que escalam automaticamente e estão sempre disponíveis a partir de qualquer dispositivo em qualquer lugar.
