O que é Redux e por que é importante no desenvolvimento Web

Por definição, Restaurado é um “contêiner de estado previsível para aplicativos JavaScript”. Para entender o que isso significa, precisamos esclarecer algumas dessas definições.

Primeiro, vamos pular para “estado”. Em termos de programação e aplicativos, um estado representa tudo combinado para manter um aplicativo em execução.

A seguir, adicionamos o termo “previsível”, o que nos dá um estado consistente, independentemente do ambiente em que é executado.

Agora podemos criar uma camada de “contêiner”, que é um aplicativo totalmente encapsulado que inclui tudo o que é necessário para ser executado.

Portanto, um contêiner de estado previsível é um aplicativo em contêiner capaz de permanecer em um estado consistente e em execução. Claro que com Redux estamos falando de uma aplicação escrita em JavaScript.

Uma análise mais aprofundada dos estados

Considere o seguinte: você usa o Aplicativo X em seu smartphone, faz algumas coisas com esse aplicativo e depois muda para o Aplicativo Y e faz coisas diferentes. Ao usar o Aplicativo Y, você percebe que esqueceu de fazer algo com o Aplicativo X e volta para o primeiro aplicativo. Quando você reabre o aplicativo original, ele estará no mesmo estado em que estava quando você o saiu pela última vez.

Isso é estado. Mas espere, tem mais.

Existem três princípios a serem considerados para o estado:

• O estado de um aplicativo é sempre armazenado em um único objeto JavaScript.
• Embora o estado seja somente leitura, ele pode ser alterado descrevendo a alteração usando uma ação JavaScript.
• As alterações em um estado são executadas por uma função redutora, que aceita o estado atual e, por meio de uma ação, retorna o novo estado (se houver alteração) ou o estado original (se não houver alteração).

Isso é principalmente coisa básica. Redux é muito mais que isso.

O que é Redux?

O Redux começou quando o Facebook começou a ter problemas com a estrutura Model-View-Controller, que é um padrão de design de software que separa um aplicativo em três componentes: Model (lógica relacionada a dados), View (lógica de UI para um aplicativo) e Controller ( interface entre Modelo e Visualização). Quando o Facebook precisou fazer um dimensionamento massivo, a estrutura MVC começou a falhar.

Nesse ponto, o Facebook lançou o Flux, que é um método unidirecional de atualização do componente View e de manipulação de ações baseadas no usuário.

Em junho de 2015, Dan Abramov criou o Redux, que é baseado no Flux do Facebook e na linguagem de programação Elm. A grande mudança que Abramov fez no Redux foi que ele usou apenas uma única loja e removeu o despachante.

Um armazenamento é uma forma de armazenar e gerenciar persistentemente coleções de dados. O Flux usou vários armazenamentos, o Redux apenas um. Portanto, se você tiver vários componentes em um aplicativo, haverá apenas um armazenamento que gerencia o estado dos componentes. Esse armazenamento pode retransmitir qualquer estado para qualquer componente, tornando-o um modelo incrivelmente eficaz e eficiente.

O despachante é um programa especial que se comunica com um escalonador e leva um processo ao estado desejado.

Redux é uma estrutura?

Resumindo, não. Em vez de ser uma biblioteca ou estrutura tradicional, Redux é uma arquitetura de fluxo de dados de aplicativos. Para usar o Redux é recomendado que você trabalhe com o Kit de ferramentas Reduxmas os blocos de construção fundamentais do Redux são:

• Ação
• Redutores
• Middleware
• Loja

Uma estrutura de software é uma plataforma de desenvolvimento que pode incluir bibliotecas de código, um compilador e as ferramentas necessárias para construir aplicativos completos. Redux, por outro lado, é simplesmente uma biblioteca JavaScript com uma única tarefa: gerenciar estados em aplicativos JavaScript.

Portanto, em vez de construir aplicativos com Redux, você o usa para garantir que os estados do seu aplicativo JavaScript possam ser gerenciados.

O desenvolvimento Redux também é comumente usado com bibliotecas como React e Angular. Com essas combinações é possível desenvolver interfaces de usuário que dependem de um estado desejado.

E embora você possa escrever um aplicativo completo usando uma estrutura, quando esse aplicativo começar a se tornar cada vez mais complexo, usar uma estrutura para gerenciar a lista cada vez maior de componentes e estados desse aplicativo pode se tornar muito complicado, se não impossível.

Esse não é o caso do Redux.

Para que é usado o Redux?

Em termos de programação, você usaria Redux para aplicações onde os dados são compartilhados entre componentes. Por exemplo, você tem um aplicativo que usa um componente de login. Os dados do componente de login são compartilhados com o componente de status. A maioria dos aplicativos que usam Redux são aplicativos móveis (com exceções, é claro). Alguns exemplos de aplicativos que usam Redux são:

• O depurador do Firefox.
• Franklin: uma ferramenta de anotação de sequência de DNA.
• Portfólio CMS: CMS baseado em Rails e ferramenta de blog.
• GitHunt: Reddit para GitHub.
• Datamaps: uma plataforma para visualizações de mapas.
• Glsl Live Editor: um editor de shader WebGL.
• Favesound: Um reprodutor Soundcloud.
• Podbaby: um cliente de podcast web.
• Gitchecker: exibe o status dos projetos GitHub.

Usos menos óbvios para Redux são:

• Estado da IU
• Dados do formulário
• Dados da API
• Persistir e reidratar automaticamente um estado

Mais impressionante, porém, é a lista de empresas que atualmente utilizam Redux. Essa lista inclui coisas como:

• Instagram
• Robinhood
• Folga
• Porta Dash
• Patreon

Redux é Frontend ou Backend?

Antes de respondermos a essa pergunta, vamos definir frontend e backend em termos simples.

• Frontend é a interface do usuário ou software cliente.
• Back-end é o servidor.

Com isso resolvido, o Redux é usado para desenvolvimento front-end ou back-end? A resposta fácil é “ambos”. Redux pode ser usado para qualquer aplicativo que dê alta prioridade à capacidade de armazenar estados.

Deve ficar claro que o Redux pode ser usado para o lado do cliente (frontend) com interfaces de usuário. Porém, como Redux é apenas JavaScript, ele também pode ser usado no lado do servidor (backend). Isso pode parecer contra-intuitivo, considerando que o back-end tradicionalmente visa ser estatalmenos.

Um bom exemplo de uso do Redux no backend são jogos multijogador que rodam em um navegador e precisam armazenar seu estado no servidor para garantir que todos os jogadores tenham a mesma visão do jogo. Neste caso, o servidor detém o estado e é visto como a “única fonte da verdade”.

Redux é relevante?

Tem havido muitas postagens e comentários em blogs que indicam que o Redux está morto ou que outra ferramenta substituiu o Redux. Na verdade, Redux ainda é muito relevante. E com o pacote oficial do Redux Toolkit (que envolve o núcleo do Redux e fornece utilitários para simplificar uma série de casos de uso comuns do Redux), é mais fácil do que nunca empregar esta biblioteca JavaScript.

Se você gostou disso, não deixe de conferir nossos outros artigos sobre desenvolvimento web.

• O que é Web Design Sustentável e por que isso é importante
• O que é Web Design?
• Por que sua empresa deveria usar sites personalizados
• Por que você precisa adicionar um bot de suporte ao seu site
• Por que você precisa se preocupar com os sinais vitais do seu site