mobx: uma solução simples e escalável de gerenciamento de estado para react

mobx é uma biblioteca de gerenciamento de estado popular para aplicativos JavaScript, especialmente no React. Diferentemente do Redux, que se baseia em uma loja centralizada e despacho explícito de ação, o MOBX adota uma abordagem mais reativa para o gerenciamento do estado. Ele atualiza automaticamente o estado e a interface do usuário do seu aplicativo, rastreando dependências e renderizando apenas as partes necessárias do aplicativo quando o estado mudar.

Neste guia, percorreremos os principais conceitos de MOBX, como configurá -lo com o React e como usá -lo de maneira eficaz para gerenciamento de estado em seus aplicativos React.

---

1. O que é mobx?

mobx é uma biblioteca de gerenciamento de estado que aproveita programação reativa para gerenciar o estado do seu aplicativo. Ele rastreia e atualiza automaticamente as partes da sua interface do usuário que dependem do estado, tornando -o uma maneira muito eficiente e intuitiva de gerenciar dados do aplicativo.

Recursos principais de mobx:

• rastreamento automático de dependência : mobx rastreia automaticamente quais partes do seu aplicativo dependem de quais peças de estado.
• ! Mobx reage às mudanças de estado automaticamente.
declarativo
• : mobx usa uma abordagem observável, onde você define seu estado como observável , e seus componentes renderizam automaticamente quando o estado mudar.
otimizado para desempenho
• : MOBX Atualiza apenas os componentes que dependem do estado alterado, resultando em desempenho altamente otimizado.

---

2. Conceitos principais de mobx

mobx é construído em torno de alguns conceitos principais que funcionam juntos para gerenciar o estado:

1. Estado observável

Estado observável é o núcleo do mobx. Quando um objeto é marcado como

observável

, o mobx rastreia o estado desse objeto e atualiza automaticamente componentes que dependem dele.

Exemplo:

import {observable} de 'mobx'; const contador = observável ({ Valor: 0, incremento () { this.value; }, decrement () { this.value--; }, });

import { observable } from 'mobx';

const counter = observable({
  value: 0,
  increment() {
    this.value  ;
  },
  decrement() {
    this.value--;
  },
});

O decorador observável torna o contador reativo. Sempre que o valor mudar, qualquer componente react que use esse estado será renderizado automaticamente.

2. Ações

Ações no mobx são funções que modificam o estado. Por convenção, as ações devem ser usadas para atualizar o estado observável, pois o MOBX garante que o estado seja atualizado de uma maneira controlada e previsível.

Exemplo:

import {Action} de 'mobx'; const contador = observável ({ Valor: 0, incremento: ação (function () { this.value; }), decremento: ação (function () { this.value--; }), });

import { observable } from 'mobx';

const counter = observable({
  value: 0,
  increment() {
    this.value  ;
  },
  decrement() {
    this.value--;
  },
});

Os métodos de incremento e decréscimo são ações, definidas usando o decorador de ação. Esses métodos modificam o estado.

3. Valores computados

Os valores calculados são derivados do estado observável. Quando o estado observável muda, os valores calculados são automaticamente recalculados, garantindo que o estado do aplicativo permaneça consistente.

Exemplo:

import {computado} de 'mobx'; const contador = observável ({ Valor: 0, incremento () { this.value; }, decrement () { this.value--; }, Get DoubleValue () { retornar este.value * 2; }, });

import { observable } from 'mobx';

const counter = observable({
  value: 0,
  increment() {
    this.value  ;
  },
  decrement() {
    this.value--;
  },
});

O DoubleValue é um valor calculado derivado do valor observável. Sempre que o valor mudar, o DoubleValue será recalculado.

4. Reações

são efeitos colaterais que são executados sempre que um valor observável muda. As reações são úteis para acionar ações com base nas mudanças de estado.

Exemplo:

import {autorun} de 'mobx'; const contador = observável ({ Valor: 0, incremento () { this.value; }, decrement () { this.value--; }, }); autorun (() => { console.log (`valor do contador é: $ {contador.value}`); });

import { observable } from 'mobx';

const counter = observable({
  value: 0,
  increment() {
    this.value  ;
  },
  decrement() {
    this.value--;
  },
});

A função Autorun é uma reação que é executada automaticamente sempre que o contador. Ele registra o valor do contador atualizado no console.

---

3. Integração do MOBX com React

mobx se integra perfeitamente ao React para gerenciar o estado do seu aplicativo. No React, o MOBX funciona usando o componente

observer

para rastrear as alterações do estado e atualizar automaticamente a interface do usuário quando necessário.

Etapa 1: instale mobx e react-mobx

Para usar o MOBX em um aplicativo React, você precisará instalar o mobx e o mobx-react:

NPM Instale mobx mobx-react

npm install mobx mobx-react

Etapa 2: Crie uma loja observável

Crie uma loja que detém o estado do seu aplicativo. Esta loja será observável e os componentes podem reagir às suas mudanças.

Exemplo:

import {observável, ação} de 'mobx'; classe Countrestore { @observable valor = 0; @Action increment () { this.value; } @Action decrement () { this.value--; } } Countrestore const const = new Countrestore ();

import { observable } from 'mobx';

const counter = observable({
  value: 0,
  increment() {
    this.value  ;
  },
  decrement() {
    this.value--;
  },
});

A classe CounterStore define o estado observável (valor) e as ações (incremento e decréscimo).

Etapa 3: Faça o React Components Observer

Para conectar seus componentes do React ao MOBX, você precisa usar o componente de ordem superior do Observer do MOBX-REACT. Isso permitirá que seus componentes voltem automaticamente quando o estado observável mudar.

Exemplo:

import react de 'react'; importar {observador} de 'mobx-react'; importar {CounterStore} de './counterstore'; const contador = observador (() => { retornar (

contagem: {contrastore.value}

contrastore.increment ()}> incremento contrastore.DecRement ()}> decremento ão>

); }); Counter padrão de exportação;

import { observable } from 'mobx';

const counter = observable({
  value: 0,
  increment() {
    this.value  ;
  },
  decrement() {
    this.value--;
  },
});

O componente do contador é embrulhado com observador, o que faz com que ele reaja às alterações na contra -esteira. Quando a contra -estora.

Etapa 4: use a loja em seu aplicativo

! import react de 'react'; importar {render} de 'react-dom'; importar {provider} de 'mobx-react'; contador de importação de './counter'; importar {CounterStore} de './counterstore'; const app = () => ( ); renderizar (, document.getElementById ('root'));

Provider

import React from 'react';
import { render } from 'react-dom';
import { Provider } from 'mobx-react';
import Counter from './Counter';
import { counterStore } from './CounterStore';

const App = () => (
  
    
  
);

render(, document.getElementById('root'));

• 4. Vantagens de usar mobx

---

1. Simplicidade

mobx facilita o gerenciamento do estado, reduzindo o caldeira e a complexidade comumente encontrados em outras bibliotecas de gerenciamento de estado como o Redux.

2. Re-renderização automática

Quando o estado muda, o MOBX lida automaticamente na renderização dos componentes que dependem desse estado.

3. Observabilidade de granulação fina

mobx garante que apenas os componentes necessários sejam renderizados novamente quando o estado muda, melhorando o desempenho.

4. Gerenciamento de Estado Declarativo

com mobx, o estado é gerenciado declarativamente. Você só precisa definir como o estado deve se comportar, e o mobx lida com o resto.

5. Conclusão

---

mobx é uma biblioteca de gerenciamento de estado poderosa e eficiente que usa princípios de programação reativa. Com sua configuração simples e rastreamento automático de estado, ele facilita muito o gerenciamento de estados em aplicativos react. O MOBX é especialmente benéfico para aplicativos que requerem controle de granulação fina sobre atualizações e otimização de desempenho.

Se você estiver criando um aplicativo React complexo e deseja uma solução de gerenciamento de estado fácil de entender, o MOBX é uma excelente opção. É intuitivo, poderoso e funciona perfeitamente com o React para oferecer uma experiência de desenvolvimento otimizada.