O gerenciamento de estado no React é um problema que os desenvolvedores às vezes esquecem. Sempre há alguma biblioteca nova, e escolher a biblioteca certa para o seu aplicativo pode ser uma tarefa muito difícil.

É crucial para todo aplicativo moderno ter uma biblioteca de gerenciamento de estado e há muitos pontos que devem ser levados em consideração ao escolher uma biblioteca.

Vamos trabalhar com uma nova biblioteca de gerenciamento de estado chamada Valtio , uma biblioteca que simplifica o estado de proxy para aplicativos JavaScript e React.

O que é um proxy?

Os proxies são um padrão de software de computador . Os proxies são um invólucro em torno de alguns objetos que podem ter um comportamento personalizado. Podemos fazer proxy de quase tudo, como conexão de rede, objetos, arquivos, etc. Os proxies não funcionam da mesma maneira, mas são semelhantes em estrutura a adaptadores e decoradores .

Um proxy é um objeto wrapper que está sendo chamado pelo cliente para acessar o objeto de serviço real nos bastidores

Os proxies fazem parte dos padrões de design GoF , um livro escrito por Erich Gamma , Richard Helm , Ralph Johnson e John Vlissides . Os autores exploram os recursos da programação orientada a objetos e 23 padrões de design de software .

Os proxies podem ajudar os desenvolvedores a resolver problemas recorrentes em aplicativos modernos. Os proxies são mais fáceis porque nos ajudam com objetos, podem ser muito úteis em situações como validação, rastreio de acessos de propriedade, serviços da web, objetos de monitoramento, etc. Eles são objetos mais fáceis de colocar no lugar, alterar, testar e reutilizar.

Os proxies têm duas regras:

• O acesso a um objeto deve ser controlado
• Funcionalidades extras devem ser fornecidas ao acessar um objeto

Desde a versão ES6, temos proxies disponíveis em JavaScript. Um proxy recebe dois parâmetros:

• target -o objeto original que você deseja proxy
• handler -o objeto que definirá as operações

É assim que podemos criar um proxy usando JavaScript:

 const target={ adição: ()=> 2 + 2, subtração: ()=> 2-2,
}; const handler={ get: function (target, prop, receiver) { alvo de retorno; },
}; proxy const=novo Proxy (destino, manipulador); console.log (proxy.addition ());//4
console.log (proxy.subtraction ());//0

Os proxies são um padrão de design muito poderoso para observar um objeto e fazer uma alteração nele. Isso nos permite projetar um comportamento personalizado para objetos.

Imagine se pudéssemos fazer isso em um aplicativo React. Fazendo uso de proxies para lidar com nossos dados de estado. Não precisamos mais configurar enormes bibliotecas de gerenciamento de estado para lidar com todo o nosso estado. Com Valtio, podemos!

Valtio

Valtio é uma biblioteca que simplifica o estado do proxy para aplicativos React e JavaScript.

Ele foi criado por um coletivo de código aberto chamado Poimandres . Este coletivo de código aberto é responsável por outras bibliotecas importantes na comunidade React, como react-primavera , zustand , react-three-fibre e react-use-gesture .

O que precisamos fazer é envolver nosso objeto de estado e, em seguida, podemos alterá-lo em qualquer lugar em nosso aplicativo:

 importar {proxy} de'valtio' estado const=proxy ({contagem: 0});
()=> {++ state.count};

Valtio tem um gancho chamado useProxy que ajuda para lermos instantâneos. O gancho useProxy só renderá novamente nosso componente quando a parte do estado que o componente está acessando mudou:

 const Counter=()=> { instantâneo const=useProxy (estado); Retorna ( 
 {snapshot.count}  ++ state.count}> Adicionar  
 );
};

Valtio tem uma função realmente poderosa chamada subscribe . Podemos assinar nosso estado de qualquer lugar e usá-lo em nossos componentes.

Imagine que temos um estado de proxy muito complexo com vários estados diferentes. Dentro de nosso estado de proxy, temos um estado autenticado, que usamos para saber quando o usuário está autenticado ou não:

 importar {proxy} de'valtio' const state=proxy ({ autenticado: falso, definições: {... }, filtros: {...}, ...
});

Podemos assinar uma parte específica de nosso estado usando a função subscribe . A função subscribe aceita dois parâmetros, estado e retorno de chamada. O estado é a parte de nosso estado que desejamos assinar. O callback é uma função de callback que será acionada quando o estado for alterado:

 subscribe (state.authenticated, ()=> console.log ('Estado alterado para', state.authenticated));

Valtio também tem uma função chamada subscribeKey que é como a função subscribe . A subscribeKey assinará uma propriedade primitiva de um proxy de estado. No entanto, ele só será disparado quando a propriedade especificada for alterada:

 subscribeKey (state.authenticated, ()=> console.log ('Estado autenticado alterado para', state.authenticated));

Embora o JavaScript vanilla possa não ser tão comum atualmente, outro recurso do Valtio é que pode ser usado em aplicativos JavaScript vanilla:

 import {proxy, subscribe, snapshot} de'valtio/vanilla' const state=proxy ({books: [...], isAuthenticated: false}) assinar (estado, ()=> { console.log ('state:') const obj=instantâneo (estado);
})

Agora que sabemos um pouco sobre o Valtio , vamos ver como funciona na prática. Criaremos um aplicativo de exemplo simples usando Valtio para um proxy de estado no React e ver o benefícios disso.

Primeiros passos

Criaremos um novo aplicativo usando Criar aplicativo React :

 npx criar-reagir-aplicativo estado simples com valtio

Agora vamos instalar o Valtio :

 yarn add valtio

Primeiro, vamos importar o proxy e useProxy a função do Valtio. A função proxy é usada para criar um novo estado de proxy. A função useProxy é usada para criar um instantâneo local em nosso componente React que observa as mudanças:

 import {proxy, useProxy} de'valtio'

Agora, vamos criar nosso estado de proxy. Teremos três propriedades dentro de nosso estado firstName , lastName e users :

 const state=proxy ({firstName:"", lastName:"", usuários: [{}]})

Dentro de nosso componente, teremos um formulário, duas entradas e um botão. Vamos rastrear as mudanças para cada entrada e armazená-las em nosso proxy de estado. O botão será usado para enviar nosso formulário:

 const App=()=> { Retorna ( 
    Criar  
 );
}

Dentro de nosso componente, vamos criar um instantâneo usando o gancho useProxy . Este instantâneo será usado para obter nossos dados de estado de nosso estado de proxy e atualizá-los sempre que o estado mudar:

 const App=()=> { instant snapshot=useProxy (estado, {sync: true}); Retorna ( 
    Criar  
 );
}

Observe que passamos um segundo argumento para a função useProxy . Um segundo argumento é um objeto e estamos dizendo ao Valtio para fazer o lote antes de acionar um re-renderizador.

Agora, em nossas entradas, para cada entrada, vamos definir o valor para nosso estado de proxy e ler o valor de nosso instantâneo , assim:

 const App=()=> { instant snapshot=useProxy (estado, {sync: true});
Retorna ( 
  (state.firstName=e.target.value)}/>  (state.lastName=e.target.value)}/>  Criar  
 );
}

Agora, precisamos criar nossa função de envio para enviar nosso formulário. Dentro de nossa função, vamos criar um novo agrupamento de usuários com os valores firstName e lastName e enviá-lo para o array users . Depois que o novo usuário é enviado para a matriz users , queremos alterar os valores de firstName e lastName para uma string vazia:

 const App=()=> { instant snapshot=useProxy (estado, {sync: true}); const handleSubmit=(e: any)=> { e.preventDefault (); const newUser={firstName: state.firstName, lastName: state.lastName}; state.users.push (newUser); state.firstName=""; state.lastName=""; } Retorna (   (state.firstName=e.target.value)}/>  (state.lastName=e.target.value)}/>  Criar   );
}

Agora, nosso componente está funcionando perfeitamente. Somos capazes de gerenciar nosso valor de estado usando Valtio e submeter novos usuários ao nosso estado de proxy. A única coisa que falta agora é uma maneira de mostrar o número de usuários que temos.

Usaremos o instantâneo mais uma vez e mapearemos a matriz de nossos usuários e, para cada usuário, mostraremos um elemento h1 :

 const App=()=> { instant snapshot=useProxy (estado, {sync: true});
const handleSubmit=(e: any)=> { e.preventDefault (); const newUser={firstName: state.firstName, lastName: state.lastName}; state.users.push (newUser); state.firstName=""; state.lastName=""; } Retorna (   (state.firstName=e.target.value)}/>  (state.lastName=e.target.value)}/>  Criar  
 {snapshot.users.map ((user: any)=> (
 Olá {user.firstName} {user.lastName} 
))} 
  );
}

O coletivo por trás do Valtio é muito importante e respeitado na comunidade React. Eles também são autores de projetos importantes, como zustand , react-spring , react-three-fibre , etc.

O futuro é muito promissor para a biblioteca Valtio , com uma coletivo e desenvolvedores dispostos a contribuir para o projeto.

Conclusão

Dados de estado são essenciais para aplicativos modernos. Valtio é simples, poderoso e combina o poder dos proxies em React e JavaScript, tornando os dados de estado fáceis de serem usados ​​e alterados também.

A postagem Simplificar estado de proxy com Valtio apareceu primeiro em LogRocket Blog .

Source link