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?
- 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.
- Faça a instalação do Redux: tendo instalado e iniciado o React, é importante adicionar o Redux como biblioteca no projeto.
- Instale a React-Redux: a biblioteca dentro do Redux fará a ponte entre o React e o Redux, tornando o projeto mais simples.
- 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
O Redux é uma biblioteca de gerenciamento de estados em JavaScript. Ele centraliza os estados de uma aplicação, permitindo que diferentes componentes compartilhem e modifiquem esses estados.
O Redux serve para aplicações complexas onde há necessidade de compartilhar estados entre muitos componentes.
Fonte de verdade: o estado é centralizado em um único store;
Estados são somente para leitura: só é possível fazer alterações no estado por meio de actions
Alterações com funções puras: as modificações no estado são feitas por reducers, que são funções puras