Mobx: gerenciando estados em aplicações React

MobX e gerenciamento de estados - Apresentação

Você já pensou em gerenciar os estados de suas aplicações React de forma minimalista, simples e reativa? Se sim, você está no lugar certo. Meu nome é Neilton, sou instrutor na Escola de Front end.

Audiodescrição: Neilton é um homem de pele negra, com olhos e cabelos escuros e curtos. No momento, ele está utilizando óculos com armação retangular e uma camisa amarela. Ao fundo, paredes brancas iluminadas por luzes azuis e roxas.

Boas-vindas a este curso de React, onde vamos explorar um gerenciador de estados chamado MobX. Nós somos pessoas desenvolvedoras na aplicação do Poupapp. Esta aplicação está com alguns dados hardcoded (codificados diretamente, não a partir de fontes externas), e nosso trabalho é desenvolver funcionalidades para ela, como calcular o orçamento diário disponível, um progresso de meta financeira, permitir adicionar transações e contas, e exibir um gráfico de gastos por categoria.

Durante nossa jornada neste curso, gerenciaremos todos esses estados utilizando o MobX. Eles são utilizados em vários componentes, portanto, é bom centralizar esses estados com uma biblioteca de gerenciamento. Vamos mergulhar nos princípios do MobX, aprender sobre como funciona o fluxo de dados, trabalhar com o estado observável, actions (ações), derivações, reações e muito mais.

Se você está se perguntando o que precisa saber para continuar conosco neste curso, é necessário ter uma boa base de React e também conhecer bastante JavaScript, pois encontraremos alguns conceitos, principalmente de classes e programação funcional.

Estou muito animado para seguir com você nessa jornada e espero que você também esteja. Sem mais delongas, vamos ao próximo vídeo.

MobX e gerenciamento de estados - Instalando o MobX e mobx-react

Na aplicação Poupapp, podemos preencher informações como nome, renda mensal e um objetivo financeiro. No navegador, por exemplo, ao preenchermos os campos com um nome, uma renda mensal de 5 mil e o objetivo de economizar, ao clicar em "Ir para o app", somos direcionados para o dashboard da aplicação, a página inicial.

No entanto, observamos que, abaixo da barra de pesquisa, onde deveria aparecer o nome, ele não está sendo exibido. Além disso, os valores do orçamento diário disponível e do progresso da meta financeira estão fixos no código, o que chamamos de hardcoded. Esses valores, como o de 100, não são capturados pelo campo de renda mensal, assim como as transações e contas, que também estão fixas no código.

Vamos analisar o código no Visual Studio Code para entender melhor o que ocorre na aplicação. Em aplicações como o Poupapp, podemos ter muitos estados utilizados em vários componentes, o que pode levar ao fenômeno de prop drilling. Isso acontece quando passamos uma prop por vários componentes até que ela seja realmente utilizada.

No arquivo Home.jsx, em "src > screens > home", temos uma constante de transações com três transações exibidas na aplicação e, na linha 38, uma constante chamada contas com três contas. Essas constantes são passadas como props para o componente de transações na linha 55 e para o componente de contas na linha 56.

Em Transacoes na linha 9, recebemos as transações como props e as utilizamos no componente ListaMovimentacoes, onde cada transação é renderizada com o componente transacao. A prop passa por três componentes até ser utilizada no componente transacao, caracterizando o prop drilling.

Para resolver esse problema, geralmente utilizamos o Context API que, caso você ainda não conheça, recomendaremos um material sobre o assunto, e sobre React. Vamos utilizar o Context API para compartilhar o estado na aplicação. Poderíamos usar bibliotecas como Redux, Recoil ou Zustand, mas optaremos pelo MobX para o gerenciamento do estado da aplicação.

Para isso, precisaremos instalá-lo. No terminal, que abriremos com o atalho "Ctrl + J", digitaremos npm install mobx-react e pressionaremos "Enter" para instalar as bibliotecas. O MobX será a bibilioteca utilizada para gerenciar os estados, e o mobx-react facilitará o trabalho com o MobX no React. Após a instalação, criaremos uma pasta chamada "mobx" em "src" para armazenar os arquivos relacionados ao MobX.

O MobX é uma biblioteca minimalista, com a filosofia de que tudo que for derivado do estado deve ser derivado automaticamente. Possui vantagens em relação a outras bibliotecas como Redux e Recoil, sendo muito simples de usar. Podemos capturar dados de um formulário usando JavaScript e recuperar estados ou métodos que alterem esses estados de forma simples. O MobX também oferece renderização sem esforço, rastreando dados e atualizando automaticamente a interface do usuário conforme os estados mudam, sem a necessidade de técnicas de memoização como useMemo ou useCallback.

Além disso, o MobX é completamente desacoplado da interface do usuário. Podemos desenvolver com o MobX, controlar o estado da aplicação e depois acoplar a interface de usuário preferida, como Angular ou Vue, sem grandes mudanças.

Essas são algumas vantagens de utilizar o MobX. Já instalamos a biblioteca e criamos uma pasta para o MobX. O próximo passo é criar uma loja para compartilhar os estados do usuário com a aplicação. Nos vemos em breve para fazermos isso juntos.

MobX e gerenciamento de estados - Criando a store de usuário

Quando trabalhamos com uma biblioteca de gerenciamento de estados, geralmente temos um local chamado de store. Esse local é onde reunimos os estados da aplicação e depois os compartilhamos com a nossa aplicação. Com o MobX, não é diferente; também temos um local chamado de store.

Antes de criarmos essa loja, é importante refletirmos sobre o que será "vendido" nela, ou seja, quais dados serão gerenciados. Por exemplo, na tela de cadastro de nossa aplicação, temos três informações importantes: nome, renda mensal total e objetivo financeiro. Esses dados serão utilizados para calcular o orçamento diário e o progresso da meta financeira. Portanto, começaremos configurando esses dados na nossa store.

No VSCode, dentro da pasta "mobx", em "src", criaremos um arquivo chamado usuarioStore.js, que será a nossa store de usuário, contendo os dados correspondentes. Para isso, utilizaremos o padrão de classes, comum na documentação do MobX e em muitos exemplos de código, já que ele é não opinativo. Utilizar classes facilita a experiência de desenvolvimento, especialmente com TypeScript, pois melhora o autocomplete com Lints no VSCode.

Definiremos a nossa store de usuário com classes da seguinte forma:

class UsuarioStore {
    nome = "";
    renda = 0;
    objetivoFinanceiro = "";
}

Criamos a classe UsuarioStore e definimos os estados nome, renda e objetivoFinanceiro. Em seguida, criaremos uma instância dessa classe e a exportaremos:

export const usuarioStore = new UsuarioStore();

Para que isso funcione, precisaremos de um método chamado constructor() dentro da nossa classe, utilizando também o método makeObservable(), que é importado da biblioteca MobX:

import { makeObservable, observable } from "mobx";

class UsuarioStore {
    nome = "";
    renda = 0;
    objetivoFinanceiro = "";
    
    constructor() {
        makeObservable(this, {
            nome: observable,
            renda: observable,
            objetivoFinanceiro: observable,
        });
    }
}

No makeObservable(), passamos this e definimos quais valores são observáveis. O MobX monitorará esses estados e, quando eles mudarem, sinalizará as partes da interface do usuário que precisam ser atualizadas.

Com isso, construímos a store do usuário, focando nos estados relacionados ao usuário. O MobX rastreará qualquer mudança nesses estados e informará a interface do usuário para que ela se atualize automaticamente.

A seguir, abordaremos como atualizar esses estados. Até lá.

Sobre o curso Mobx: gerenciando estados em aplicações React

O curso Mobx: gerenciando estados em aplicações React possui 156 minutos de vídeos, em um total de 51 atividades. Gostou? Conheça nossos outros cursos de React em Front-end, ou leia nossos artigos de Front-end.

Matricule-se e comece a estudar com a gente hoje! Conheça outros tópicos abordados durante o curso:

• MobX e gerenciamento de estados
• Derivações e valores calculados
• Observando a reatividade
• Adicionando transações e contas
• Visualizando o balanço financeiro