IGTI Blog
react

Como gerenciar estados de componentes em aplicações React?

Geralmente uma aplicação web é composta de duas partes: Interface com o usuário UI e o estado de cada componente, logo saber gerenciar os estados destes componentes é um passo importante na prevenção de possíveis bugs.

Como o React permite desenvolver interfaces baseadas em componentes e possuir um fluxo de dados unidirecional, ou seja, os dados fluem sempre de um componente pai para um componente filho, isso permite um melhor controle da atualização de estados de cada componente. Mas em algum ponto essa forma de atualização de estado não será tão eficiente, quando um componente pai possui vários componentes filhos aninhados, força o fluxo de dados a passar por vários componentes até chegar no componente alvo, tornando a tarefa de atualização do estado de um componente complexa. 

Neste contexto, podemos utilizar uma biblioteca que será muito útil nessa tarefa, estou falando do Redux. Um dos pontos-chave do Redux é que todos os dados são armazenados em um único objeto, chamado de árvore de estado. Basicamente uma árvore de estado é um Array que armazena os estados dos componentes. Dessa forma, para podermos gerenciar o estado de um componente devemos interagir com a arvore de estado. 

Para isso, existem 3 formas de interação: 1) obter os estados da árvore, 2) observar as alterações dos estados e 3) atualizar os estados. Podemos juntar tudo isso em um único conceito: A Store. 

Podemos definir a Store como um Armazenador, que será responsável por 4 coisas: 1) gerenciar os estados,  2) fornece uma API para obtenção dos estados da árvore, 3) observar as alterações dos estados e 4) atualizar os estados. Uma regra básica de atualização de estado em uma Store é que, somente um evento pode gerar uma alteração do estado, a esse evento chamamos de Actions. Logo para garantir a previsibilidade de alteração de estados, devemos definir todas as possíveis actions (eventos) que podem ocorrer em nossa aplicação, ou seja, somente os eventos definidos podem provocar alterações no estado de um componente. 

Estamos perto de finalizar. Agora que definimos os eventos que alteram o estados devemos criar um elemento importante, que chamaremos de Reducer, o reducer é uma função pura que retorna o novo estado baseado nos parâmetros de entrada, esses parâmetros são o estado atual e o evento ocorrido que irá gerar a alteração. Aqui cabe uma observação do que seria uma função pura. Uma função pura é uma função que cumpre os requisitos a seguir: 

  1. Retornam sempre o mesmo resultado quando os mesmos argumentos são passados para elas, 
  2. Dependem apenas dos argumentos passados para elas e 
  3. Não produzem efeitos colaterais, como solicitações de API e operações I/O. 

Uma vez que temos uma função pura, ou seja, um reducer, devemos saber como chamar essa função para realizar a alteração do estado. Para isso iremos criar uma função que chamaremos de dispatch. Dispatch é a função chamada com a ação que irá alterar o estado, chamando em seguida o reducer que é carregado com a árvore de estado, logo a seguir o estado e a ação é passado para a Store por meio da função createStore e por fim o estado é atualizado.

Professor autor: Wanderson Leandro de Oliveira

React