Redux Form: uma simples alternativa para formulários com React+Redux

Por vezes, a criação e manipulação de formulários em aplicações web pode tornar-se aborrecida e dispendiosa para programadores. A utilização de frameworks e bibliotecas geralmente procura simplificar todo este processo. Contudo, existem vários aspetos que devem ser tidos em conta durante a fase de seleção das mesmas.

Neste artigo vou referir algumas das vantagens da utilização e combinação de frameworks (como React e Redux), durante a criação e manipulação de formulários para aplicações web.

O Redux possui uma biblioteca chamada Redux Form, construída com o propósito de representar uma alternativa simples, que permite aos programadores o resguardo de algumas horas de trabalho adicionais.

O que é o React?

Antes de começar a abordar as características e vantagens de cada uma das tecnologias, é conveniente compreender alguns dos conceitos principais do React.

A tecnologia React é uma framework relativamente recente, contudo, bastante popular no universo de desenvolvimento e criação de interfaces dinâmicas para ambientes web. É composta por Javascript e foi desenvolvida pelo Facebook.

A verdade é que o React simplifica todo o processo de criação da camada frontend das aplicações. Permite criar e relacionar componentes, organizados e estruturados de forma bastante simples. Cada um destes componentes possui duas características ou funcionalidades principais:

  • state: representa o estado da informação e conteúdo de cada um dos componentes da aplicação (armazenada no cliente). É único em cada um dos componentes e permite ao programador a alteração constante de informação, em (quase) tempo real.
  • Os props: os props representam propriedades (ou inputs), que podem ser enviados, sempre que um componente é declarado. Desta forma, os componentes podem ser dinâmicos e facilmente reutilizados.

Para o artigo em questão, apenas é necessário compreender o conceito do state. Mais informação acerca das diversas funcionalidades e utilização do React na sua documentação oficial, disponível em: https://reactjs.org/docs

A utilização do state em formulários

O state é uma ferramenta muito útil na criação e manipulação de formulários. A associação de uma variável global (declarada no state) a cada um dos campos do formulário, permite que a informação flua em tempo real, consoante a inserção de valores por parte do utilizador.

Contudo, a utilização do state convencional requer a utilização de eventos para cada um dos campos do formulário. Ou seja, sempre que o utilizador insere algum valor no input, é executada uma função que atualiza o state da aplicação. Consecutivamente, o valor do input é também atualizado.

Representação gráfica do que acontece quando um utilizador atualiza um campo de um formulário em React.

Apesar de o processo parecer bastante simples, requer algumas linhas de código e, em formulários com grandes quantidades de informação, pode representar uma quebra de performance da aplicação.

Finalmente, com o preenchimento de todos os campos do formulário, o utilizador deve submeter os dados. Esta submissão, geralmente representa o envio de um conjunto de dados, através de um pedido http, de forma a inserir ou editar dados armazenados na base de dados ou servidor da aplicação.

A utilização de Redux

Redux é uma biblioteca que oferece uma nova maneira de ver e estruturar uma aplicação desenvolvida em React. De forma muito simples, o Redux permite ao desenvolvedor, a criação de um state global (store), que, pode ser acedido e alterado por qualquer componente da aplicação.

Desta forma, o programador possui à sua disposição, um objeto com todas as informações da aplicação, passível de ser atualizado e alcançado apenas através das suas propriedades (props).

É vantajoso em vários aspetos, mas especialmente em termos de performance, na medida em que diminui o número de pedidos http realizados, bem como, o excesso de propriedades enviadas para cada um dos componentes.

Para mais informações acerca do Redux, consultar: https://redux.js.org/

Redux Form

Finalmente, depois de compreendidos os conceitos anteriores, é possível perceber as vantagens da utilização do Redux Form.

Tendo em conta que a aplicação utiliza ambas as tecnologias referidas, o programador possui duas formas diferentes de criar e manipular a informação de um formulário:

  • Criar um evento para cada um dos campos do formulário. Este evento deve ser capaz de executar a validação do valor inserido, atualizar o state do componente em questão e, finalmente, atualizar o valor do respetivo campo, no formulário.
  • Utilizar uma biblioteca que faz todo este trabalho sozinha.

Esta biblioteca é o Redux Form. O Redux Form cria uma ligação entre os valores  dos campos do formulário, com o objeto armazenado na store (state global da aplicação), unicamente através da utilização do HOC (High Order Component)reduxForm”. Este HOC cria um objeto referente ao formulário nas propriedades do componente (identificado através de um nome único).

Por fim, quando o utilizador submete a informação do formulário, é executado um evento (reducer). Este atualiza o estado global da aplicação, consoante a informação armazenada.

Assim, o Redux Formcontrola de forma automática, todo o estado do formulário:

  • Os campos do formulário;
  • Os respetivos valores;
  • Os campos selecionados pelo utilizador;
  • Se os valores são válidos;
  • Os campos que foram ou não alterados/selecionados;
  • Se o formulário está a ser submetido;
  • Se está a acontecer algum tipo de validação.

Para além disso, o Redux Form permite ao programador, gerir todos os comportamentos do formulário, bem como estilos e estrutura. O que torna esta biblioteca flexível e capaz de proporcionar uma boa experiência para o desenvolvedor.

Em suma,

A utilização e estudo de bibliotecas e frameworks como o React e Redux, são opcionais. Contudo, representam, na maior parte dos casos, um incremento do nível de performance e qualidade de código da aplicação. Neste caso, possuindo, toda a informação de um formulário armazenada na store global da aplicação, o programador usufrui de uma vantajosa experiência a vários níveis. Poupa nas linhas de código e beneficia de um incremento da  performance da aplicação.

Para mais informações sobre o Redux Form, consultar: https://redux-form.com

 

 

 

Deixe uma resposta

O seu endereço de email não será publicado. Campos obrigatórios marcados com *