Como simplificar o gerenciamento global do estado no React usando Jotai

Se você já usa o React há algum tempo, sem dúvida já passou por cenários em que o estado global é necessário. Neste artigo vou explicar como você pode usar o Jotai, desde Daishi Kato(criador do Waku), para implementar um estado global realmente simples, mas intuitivo, para seus aplicativos React.

O que é o estado global?

O estado global difere do estado local, que está confinado a um componente específico. O estado global pode ser compartilhado entre vários componentes, fornecendo funcionalidade de leitura e gravação.

Existem várias soluções existentes que ajudam a fornecer estado global no React – você já deve estar familiarizado com a API Context do React, Redux, MobX ou os ganchos useState e useReducer do React.

O que é Jotai?

Jotai é uma solução de gerenciamento de estado primitiva e flexível para React.

Jotai oferece uma API minimalista que você pode usar para separar o gerenciamento de estado da sua UI. Você obtém todos os benefícios de um estado bem gerenciado e não precisa configurar nenhum padrão, como definir ações, redutores, despachantes ou lojas.

Jotai oferece uma API minimalista que você pode usar para separar o gerenciamento de estado da sua UI.

Jotai nasceu para resolver problemas extras de re-renderização no React. Uma nova renderização extra ocorre quando o processo de renderização produz o mesmo resultado de UI, onde os usuários não verão nenhuma diferença. Você pode ver o Jotai como um substituto imediato do React useContextexceto que com Jotai você cria um átomo e está pronto para as corridas.

Aqui abordarei o básico do uso do Jotai com Waku, que é predominantemente uma estrutura React do lado do servidor, mas usando o 'use client' Diretiva React, ela também pode oferecer suporte à interatividade do lado do cliente.

Primitivos do átomo

Jotai, em sua forma mais simples, pode ser usado onde um átomo e seu valor padrão são definidos e exportados de um arquivo de “estado” compartilhado.

Veja o código no Gist.

De dentro de um componente agora você pode importar o átomo e passá-lo para o gancho useAtom. O valor do átomo é então legível a partir do count constante.

Veja o código no Gist.

Neste exemplo, o div que contém o count exibiria o valor inicial do átomo de 0. Você poderia importar e ler esse valor de qualquer componente em seu aplicativo, assim como faria com um componente “comum” const ou enum, etc. A diferença é que um átomo também pode ser escrito.

Átomo primitivo gravável

Para escrever em um átomo, a declaração pode ser estendida para incluir tanto o valor legível quanto uma função de atualização como uma tupla, assim como useState em Reagir.

Veja o código no Gist.

Neste exemplo, uma função de atualização foi incluída na declaração const e um manipulador de eventos foi adicionado para lidar com o clique do botão. O setCount função de atualização tem acesso ao atual count valor, que pode então ser incrementado em 1 cada vez que o botão é pressionado.

O atualizado count O valor pode ser exibido por este componente e também pelo componente somente leitura.

Lidar com primitivos é bastante simples, mas e os objetos?

Objeto Átomo

Como antes, um novo átomo pode ser definido no arquivo de “estado” global.

Veja o código no Gist.

Átomo de objeto gravável

Para atualizar um átomo de objeto, a abordagem é semelhante ao React, onde você pode usar um operador spread (...) para criar uma cópia superficial do objeto e, em seguida, atualizar um valor contido no objeto. Neste caso, o test valor será definido como o valor fornecido pela caixa de seleção (event.target.checked), que será igual true ou false. Quaisquer outros pares de valores-chave do objeto, por exemplo, foo: 'bar'permaneceriam como estão.

Veja o código no Gist.

Como antes no exemplo do átomo primitivo, esse objeto poderia ser lido de qualquer outro componente do aplicativo.

Valores de estado do lado do servidor

É bastante provável que em aplicações modernas um valor inicial seja definido como resultado de uma solicitação do lado do servidor. Nesses cenários, useHydrateAtoms pode ser usado para atualizar o estado do lado do cliente com valores recebidos como resultado de uma solicitação do lado do servidor.

Neste cenário, você definiria o átomo no arquivo de estado global e definiria os valores padrão, por exemplo:

Veja o código no Gist.

Então, a partir de uma solicitação do lado do servidor em nível de rota, você pode passar os dados para um componente, por exemplo:

Veja o código no Gist.

De dentro de um componente, useHydrateAtoms pode ser usado para atualizar os valores de estado global padrão com valores da solicitação do lado do servidor, que neste caso foram passados ​​​​para o componente por meio de uma propriedade chamada userData.

Para acessar os valores atualizados, o useAtom o gancho pode ser usado da mesma maneira que antes.

Veja o código no Gist.

No entanto, para usar o useHydrateAtoms hook com dados do lado do servidor, o componente Provider do Jotai também deve ser implementado no nível raiz do seu aplicativo. Kato deu a seguinte explicação: “Com Provider, uma loja é criada dentro de uma árvore. Sem ele, é utilizada uma loja “global”. O lado do cliente funciona com um usuário por memória. Mas no lado do servidor, vários usuários compartilham o armazenamento global. É um enorme problema potencial.”

A implementação do componente Provider seria mais ou menos assim:

Veja o código no Gist.

Valores de armazenamento local

Outro lugar onde você pode querer ler e gravar dados é localStorage. Jotai também torna isso fácil, com o utilitário atomWithStorage. Aqui está um exemplo que alterna o “modo escuro”.

Como antes, um novo átomo é definido no arquivo “state”, mas desta vez o átomo é declarado usando atomWithStorageque pode ser importado de jotai/utils.

Veja o código no Gist.

Neste exemplo, o useAtom hook é usado e fornece o valor para darkModeAtom. Isso disponibiliza o valor para o aplicativo e adiciona o valor ao navegador/localStorage do usuário.

Veja o código no Gist.

Ao declarar um novo atomWithStorage, dois parâmetros são necessários. O primeiro é o nome do item de armazenamento; o segundo é o valor — que pode ser visto nas ferramentas de desenvolvedor do navegador.

Estas são apenas algumas maneiras de usar o Jotai. Há uma série de outras receitas nos documentos que detalham outras maneiras de usá-lo. Esperamos que você concorde: Jotai realmente simplifica o gerenciamento global de estado no React.

Se você estiver interessado, também há uma boa comparação na documentação que mostra a abordagem da API React Context em comparação com a abordagem Jotai.

A postagem Como simplificar o gerenciamento de estado global no React usando Jotai apareceu pela primeira vez em The New Stack.