5 Motivos Para Usar Redux

Porque sua empresa deveria considerar o React/Redux.

Dio Ianakiara
Getty/IO Blog - The Blockchain Company

--

Quando desenvolvemos aplicativos single-page em javascript, sempre temos que lidar com o gerenciamento de estado. Administrar a situação é tão crítico que uma solução pobre pode por em risco a saúde de sua aplicação.

Por causa de problemas como este que a equipe de desenvolvimento do Facebook criou Flux.

Flux é a arquitetura de interfaces que o Facebook utiliza para criar suas aplicações. O Flux complementa os componentes que podem ser combináveis 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 eles 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. Ex: 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.

Se você tem problemas de state em suas aplicações, provavelmente é porque você não tinha certeza onde o state estava 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?

Nossa resposta é o Redux.

5 Motivos Para Usar o Redux na Sua Próxima Aplicação

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:

1. Action Tests
2. Reducers Tests
3. Middleware Tests
4. Components Tests

Porque a maior parte do código que você escreve com Redux é composto por pure functions.

Como resultado você não precisará criar mais mocks.

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 smart & dumb components.

5. Curso Grátis (Feito pelo criador do Redux)

O criador do Redux Dan Abramov disponibilizou no Egghead um curso totalmente grátis, e que vale a pena ser conferido.

Conclusão

Com Redux é possível construir aplicações mais eficientes por default, embora a curva de aprendizado seja maior, o ganho de produtividade no desenvolvimento de aplicativos será visível, uma vez que o seu entendimento seja alcançado.

Aqui na Getty/IO utilizamos a stack React / Redux / Immutablejs para o front-end das aplicações, seja React Web 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.

Getty/IO — Full Stack — Arquitetura de Referência v1.1

Artigo Sobre a Stack React / Redux / Immutable

Connect

Juntos, imaginamos e criamos aplicações web e mobile que escalam infinitamente, que estão sempre disponíveis, a partir de qualquer lugar e qualquer dispositivo.

Se você tem problemas como os descritos neste artigo, envie uma mensagem para hello@getty.io, nós podemos te ajudar.

--

--