Redux: para que serve a biblioteca e como usar seus recursos?

O Redux é uma solução para compartilhar estados de componentes diferentes de aplicações JavaScript. Ele é prático, rápido e simples de usar. A ferramenta é muito utilizada com o React, mas pode ser aproveitada em qualquer das bibliotecas e estruturas JavaScript. É ideal para programas mais complexos e de auto-gerenciamento, visto que auxilia na coordenação das atividades.

Acompanhe o conteúdo abaixo e entenda o que é, para que serve o Redux, seus principais recursos e princípios para começar a utilizar a ferramenta. 

O que é Redux?

Redux é um container para armazenamento de estados globais de aplicações JavaScript, voltada para quem trabalha com User Interface, na área de desenvolvimento. A ferramenta centraliza e unifica o armazenamento do estado. Assim, os componentes não precisam armazenar seus próprios estados, pois eles ficam registrados no store do Redux.

Criado por Dan Abramov, em 2015, a ideia é reunir informações, solucionando possíveis problemas de desencadeamento de ações. A ferramenta surgiu de uma implementação da arquitetura Flux, criada pelo Facebook para simplificar as ações do usuário.

O que quer dizer Redux?

Redux é uma biblioteca de código aberto em JavaScript que gerencia o estado de aplicações. Ela armazena todos os estados do aplicativo em um único local central, permitindo que diferentes componentes acessem e modifiquem esses estados facilmente.

O que tem no Redux?

O Redux possui três recursos principais: Store, Actions e Reducers. Ele é uma biblioteca JavaScript que armazena os estados de uma aplicação.

• Store: É o local central onde todo o estado da aplicação é armazenado. Isso garante que todas as partes da aplicação acessem o mesmo ponto de verdade.
• Actions: Representam eventos ou intenções que descrevem o que deve acontecer na aplicação. Cada action contém um tipo (type) e, opcionalmente, dados adicionais (payload).
• Reducers: São funções puras que recebem o estado atual e uma action, processam a mudança e retornam um novo estado atualizado.

Para que serve o Redux?

O Redux serve para armazenar estados de aplicações JavaScript. Ele surgiu como uma implementação do Flux, uma arquitetura desenvolvida pelo Facebook para melhorar o fluxo de dados unidirecional em aplicações de interface de usuário (UI).

Na prática, o Redux atua no gerenciamento de estados dos componentes de um programa. Ele é responsável por armazenar e repassar as informações entre os componentes quando necessário. Os dados ficam unificados, e é muito mais simples identificar e resolver erros que surgem no programa.

Quais os princípios do Redux?

Primeiro princípio do Redux: Fonte de verdade

Esse princípio estabelece que o store é a única fonte de “verdade” no aplicativo. Desta maneira, a fonte de informações e coordenação dos processos está armazenada em um único local.  Cada mudança feita em qualquer componente é registrada no store, garantindo que todas as partes da aplicação acessem o mesmo estado atualizado.

O objeto store, por sua vez, consegue armazenar as mais diferenciadas ações do aplicativo. Desta maneira, cada um dos componentes está relacionado a esta “fonte de verdade”, do Redux.

Segundo princípio do Redux: Os estados são somente para leitura

A única forma de modificar de realizar alterações nos estados é a partir das actions. Desta maneira, quem está utilizando a aplicação não consegue alterar nenhum processo. Mas, para alterar um estado é necessário fazer uma ação: um objeto que descreve o que aconteceu e solicita a mudança. Assim, todas as alterações de estado serão rastreáveis.

Terceiro princípio do Redux: As alterações só são feitas a partir de funções puras

Para alterar um estado utilizando as actions, é preciso fazer o uso de Reducers. Os Reducers, por sua vez, são funções puras que realizam a nova ação e entram em um novo estado. 

Quais os principais recursos do Redux?

O Redux possui três recursos: Actions, Reducers e Store, que possuem funções relacionadas aos princípios de ação desta ferramenta. Entenda cada um deles. 

Store é um dos recursos do Redux

Trata-se do centro de armazenagem das informações do programa. Podemos pensar no store como um núcleo de informações globais. Desta forma, o store é a parte mais importante do Redux, já que reúne dados de cada um dos componentes do programa.

O store será consultado por cada um dos componentes no momento de realizar uma ação. 

É desta forma que o Redux otimiza os processos, já que em vez de acionar diversos outros componentes, a ação será realizada somente entre o store e o componente necessário. 

Reducers são as funções puras que disparam eventos na aplicação. 

Reducers são funções puras responsáveis por determinar como o estado da aplicação deve ser atualizado em resposta a ações disparadas. Elas não causam efeitos colaterais, mas retornam a um novo estado com base na ação recebida.

Cada dado do store, portanto, possuirá um Reducer. Podemos dizer que o Reducer irá registrar na store os dados das ações realizadas, modificando as condições registradas. 

Desta maneira, a Action indicará a ação realizada por um reducer, que registrará a atividade, levada ao store. Como nem sempre as actions resultam em evoluções de estado, o Reducer possui a função de filtragem de informações.

Actions carregam informações sobre eventos no Redux

Actions são conjuntos de informações da aplicação que modificam o estado na store a partir dos reducers.

Por exemplo, ao clicar em um botão, o usuário ativa uma action que é enviada ao store, disparando uma reação. Quando essa solicitação chega ao store, um reducer processa a action e decide como o estado será atualizado. 

Desta maneira, o status do componente é atualizado no store, visível aos demais componentes necessários.

O que é o Redux no contexto do React?

O Redux é usado com uma biblioteca em conjunto com outras bibliotecas dentro do JavaScript, a principal delas é o React, porque ambas as bibliotecas possuem princípios parecidos. 

Dessa forma, o Redux auxilia o React em situações complexas. Ele possibilita o compartilhamento de informações entre componentes de forma mais eficiente e estruturada. Além de facilitar o acompanhamento das mudanças no estado do aplicativo, permitindo uma melhor compreensão do que está acontecendo em código.

Os componentes React podem se integrar ao Redux utilizando a função connect(), que vincula o estado e as ações do Redux às propriedades do componente. Ainda assim, para adicionar o Redux em um projeto React é preciso adicionar uma biblioteca chamada “React-Redux”. 

Como instalar o Redux no React?

1. Create React App: trata-se do React, onde é possível iniciar seu projeto. Como o React funciona muito bem com o Redux, é interessante iniciar um programa a partir dele para treinar o uso do Redux.
2. Faça a instalação do Redux: tendo instalado e iniciado o React, é importante adicionar o Redux como biblioteca no projeto. 
3. Instale a React-Redux: a biblioteca dentro do Redux fará a ponte entre o React e o Redux, tornando o projeto mais simples.
4. Faça a configuração da biblioteca. Você precisará configurar o Store, os Reducers e as Actions. Vale a pena estudar sobre as melhores opções, e conferir também as opções de instalação no site oficial.

Existe também a opção de operar com o Redux Toolkit. Trata-se de um conjunto oficial de ferramentas que possibilita uma interação mais simples com o Redux. É uma opção para facilitar o uso do Redux em seus projetos.

Os processos de aplicação do Redux são complexos e você precisará aplicá-los na prática para, de fato, sentir a necessidade da utilização. Nem sempre o Redux será necessário, então é importante testar as actions e reducers aplicados para garantir que são importantes no projeto.

Perguntas frequentes