DEV Community

Cover image for Prazer, MobX: uma solução de gerenciamento de estado para aplicações React
Ryan Lucas
Ryan Lucas

Posted on • Originally published at ryangst.click

Prazer, MobX: uma solução de gerenciamento de estado para aplicações React


TLDR: Mobx é uma solução de gerenciamento de estado: Nesse artigo escrevo um pouco sobre a teoria por trás do funcionamento

Link de exemplo com react

Link da documentação

Não existe maneira melhor de criar aplicações bugadas e difíceis de manter do que não gerenciar corretamente o estado da sua aplicação.

Mobx busca fazer isso de maneira simples ao arrancar a raiz do problema: fazendo com que seja muito difícil criar estados inconsistentes.


Para entender melhor como o MobX funciona, vamos começar pelo básico: o estado da aplicação. O estado da aplicação é basicamente todos os dados que são usados pela aplicação e que podem ser alterados ao longo do tempo. No React, esses dados geralmente são mantidos no componente de estado, mas com o MobX, podemos mantê-los em qualquer lugar.

As derivações são valores que podem ser calculados a partir do estado da aplicação. Por exemplo, se o estado da aplicação inclui um array de números e você quer saber a soma desses números, essa soma seria uma derivada. O MobX permite que você defina essas derivações de maneira fácil e as mantém atualizadas automaticamente sempre que o estado da aplicação for alterado.

As reações são basicamente como as derivações, mas em vez de produzir um valor, elas fazem alguma coisa quando o estado da aplicação muda. Por exemplo, você pode definir uma reação que atualize o DOM sempre que o estado da aplicação mudar. O MobX garante que as reações sejam executadas de maneira síncrona e sem problemas sempre que o estado da aplicação mudar.

Por último, temos as ações. As ações são todas as coisas que alteram o estado da aplicação. No MobX, todas as ações são processadas por derivações e reações, o que significa que todas as alterações no estado da aplicação são feitas de maneira síncrona e sem problemas. Isso é útil porque garante que não haja problemas como estados inconsistentes ou alterações no estado que não são refletidas corretamente na interface do usuário.

Árvore de eventos MobX

Em resumo, o MobX é uma ferramenta útil para gerenciar o estado da sua aplicação de maneira fácil e consistente. Ao permitir que você defina derivações e reações para manter o estado da aplicação atualizado, ele torna mais fácil criar aplicações robustas e sem problemas. Se você está procurando uma maneira de gerenciar o estado da sua aplicação com o React, definitivamente deve dar uma olhada no MobX.

Conecte-se comigo 👍

Linkedinho
X - App do passarinho

Billboard image

The fastest way to detect downtimes

Join Vercel, CrowdStrike, and thousands of other teams that trust Checkly to streamline monitoring.

Get started now

Top comments (0)

Billboard image

The Next Generation Developer Platform

Coherence is the first Platform-as-a-Service you can control. Unlike "black-box" platforms that are opinionated about the infra you can deploy, Coherence is powered by CNC, the open-source IaC framework, which offers limitless customization.

Learn more

👋 Kindness is contagious

Engage with a sea of insights in this enlightening article, highly esteemed within the encouraging DEV Community. Programmers of every skill level are invited to participate and enrich our shared knowledge.

A simple "thank you" can uplift someone's spirits. Express your appreciation in the comments section!

On DEV, sharing knowledge smooths our journey and strengthens our community bonds. Found this useful? A brief thank you to the author can mean a lot.

Okay