Redux é uma maneira de pensar o desenvolvimento de aplicações criada pelo @dan_abramov que teve como principio optimizar a ideia do Flux. Ela foi criada para tentar optimizar alguns obstáculos que o Flux começou a enfrentar, e também veio para simplificar a implementação do mesmo. Inspirada em conceitos da linguagem funcional Elm, e de algumas bibliotecas JS como o Immutable.js, o Baobab, o RxJs e o próprio Flux, o Redux veio com alguns paradigmas interessantes e um pouco diferenciados do Flux.
Triforce do Redux
O Redux é composto de três princípios que formam e definem o seu conceito. Eles são:
- Um único ponto de verdade – Todo o estado da aplicação é mantido em apenas um único objeto chamado de Store.
- O estado é imutável – O estado da aplicação é inalterável, a unica maneira de afeta-lo é emitindo uma Action com a mudança.
- Mudanças são feitas apenas por funções puras – Reducers recebem as Actions emitidas e aplicam-nas ao estado. Sempre retornando um novo estado.
Agora com os princípios estabelecidos, vamos entender o que significa cada uma dessas parte da arquitetura.
O que é Estado
Quando se trata de aplicações reativas, ouvimos muito falar do tal estado (ou state em inglês), mas nem todo mundo consegue assimilar de fato o que ele representa na aplicação.
Estado é ser considerado o conjunto de dados mantidos no momento em que sua aplicação está rodando no lado do cliente. Qualquer atualização que envolva alteração desses dados, automaticamente essa mudança irá alterar o estado.
Views
Views são os arquivos finais mostrados para o usuário, na maior parte dos frameworks views são todos os arquivos HTML renderizados pelo Browser, no caso do React em especifico, as views são consideradas componentes React, onde o contexto é renderizado através da função render().
Actions
Actions (ou ações) são objetos que servem para transmitir o que será enviado de sua view para sua store.
Actions possuem obrigatoriamente uma propriedade type que indica o tipo de ação que será executada, e que por sua vez devem ser escritas sempre como constantes.
Neste caso estou criando uma action que será do tipo ENVIAR_MENSAGEM e a propriedade text é apenas um parâmetro que ela irá transmitir para a store.
Reducers
Actions descrevem de fato que algo aconteceu e o papel dos Reducers é transmitir o que aconteceu para alterar devidamente sua store
Vamos analisar o código acima:
Primeiro gostaria de avisar que estou implementando usando ES2015, então sugiro para quem ainda não experimentou, de uma olhada neste link que é uma referência bem bacana sobre o que mudou.
Em primeiro lugar eu declarei o estado inicial da aplicação com uma propriedade mensagem e disse que seu valor é Olá Mundo
Criei uma função chamada de olaMundo com dois parâmetros (state que já declarado como meu estado inicial e a action que foi emitida para acionar este reducer) e nela que está a mágica. Note que ela possui um switch com duas condições, explicarei apenas a primeira, pois as duas basicamente tem o mesmo resultado.
Quando a Ação ENVIAR_MENSAGEM é emitida para este reducer, ele irá atribuir o valor que a action transmiti ao estado e a função Object.Assign() será responsável por criar a cópia do estado e envia-lo à store.
Store
Além de manter o estado da aplicação como já falado antes. A Store também tem algumas outras responsabilidades, são Elas:
- Permitir a leitura do estado através do método
getState(); - Permitir que o estado seja alterado pelos Reducers;
- Registrar Listeners para escutar o estado à partir do método
subscribe(listener); - Manipular os Listeners registrados.
Migrando Para o Redux
Como é dito na própria documentação oficial do Redux, ele nao é algo que te deixará preso e impossibilitado de mudar, mas claro, caso queira adota-lo, algumas tomadas de decisões terão de ser feitas.
Redux is not a monolithic framework
O Redux também é uma maneira de se pensar, note que todos os passos que eu mostrei não são exclusivos do React, ou do Angular por exemplo, a biblioteca em si foi documentada usando o React, mas nada te impede de implementar a ideia em qualquer outro Framework como o Angular.
E para quem usa o Backbone também existe uma lib citada pelo próprio Redux para você que queira fazer a migração.
Conclusão
Lembrando que o Redux não é de forma alguma um concorrente do Flux, ou das outras implementações do mesmo. E que esse post é apenas uma breve introdução ao assunto. Deixei alguns links interessantes nas referencias para quem possam começar ou continuar a estudar Redux.
Para ler mais
Um ótimo exemplo para entender mais sobre o que eu escrevi acima pode ser encontrado em aqui;
A documentação completa pode ser vista através deste link;
E caso tenha lido o post sobre Electron.js e queira iniciar o desenvolvimento de aplicações Desktop usando React + Redux aqui esta o repositório que criei com uma breve introdução ao assunto.
Migração do Backbone.
Migrando o Angular.js para Redux.