Explorando o gerenciamento de estado em React usando Jotai: um guia prático

Gerenciar o estado em projetos de pequena escala geralmente é direto usando hooks e props do React. No entanto, à medida que o aplicativo cresce e surge a necessidade de compartilhar e acessar dados em diferentes componentes, isso geralmente leva à perfuração de suporte. Infelizmente, a perfuração de suporte pode sobrecarregar rapidamente a base de código e introduzir desafios de escalabilidade.

Embora o Redux ofereça uma ótima solução de gerenciamento de estado, sua API pode ser esmagadora para projetos relativamente pequenos. Em contraste, Jotai, uma biblioteca mínima de gerenciamento de estado que utiliza unidades independentes de estados chamados átomos para gerenciar estado, elimina desafios como perfuração de suporte e permite um gerenciamento de estado mais direto e escalável abordagem.

O que é Jotai e como funciona?

Jotai é uma biblioteca de gerenciamento de estado que oferece uma solução simples de gerenciamento de estado em contraste com alternativas mais complexas como o Redux. Ele utiliza unidades independentes de estado chamadas átomos para gerenciar o estado no aplicativo React.

Idealmente, diferentes componentes do aplicativo acessam e atualizam esses átomos usando um gancho fornecido por Jotai chamado de useAtom. Aqui está um exemplo simples de como criar um átomo de Jotai:

importar { átomo } de'jotai';
const contadorAtom = átomo(1);

Para acessar e trabalhar com átomos no Jotai, você pode simplesmente usar useAtom gancho que, como outros Ganchos de reação, permite acessar e atualizar o valor de um estado dentro de um componente funcional.

Aqui está um exemplo para demonstrar seu uso:

importar { useAtom } de'jotai';
const contadorAtom = átomo(1);
funçãoMeuComponente() {
const [count, setCount] = useAtom (countAtom);
const incremento = () => setCont((prevCount) => prevCont + 1);
retornar (


Contagem: {contagem}</p>
Incrementar</button>
 </div>
 );
}

Neste exemplo, o useAtom gancho é usado para acessar o contagemAtom átomo e seu valor associado. O setCount A função é usada para atualizar o valor do átomo e todos os componentes associados serão renderizados automaticamente com o valor atualizado.

Ao acionar apenas os componentes afetados, ele reduz as novas renderizações desnecessárias no aplicativo. Essa abordagem direcionada à nova renderização melhora o desempenho geral do aplicativo.

Com o básico fora do caminho, vamos criar um aplicativo To-do React simples para entender melhor os recursos de gerenciamento de estado do Jotai.

Gerenciamento de estado em React usando Jotai

Para começar, criar um aplicativo React. Como alternativa, você pode utilizar o Vite para configurar um projeto React. Depois de montar um aplicativo React básico, vá em frente e instale o Jotai em seu aplicativo.

npm install jotai

Em seguida, para utilizar o Jotai em seu aplicativo, você precisa agrupar todo o aplicativo com o Fornecedor componente. Este componente contém o armazenamento que serve como hub central para fornecer valores atômicos em todo o aplicativo.

Além disso, permite declarar o estado inicial dos átomos. Ao agrupar seu aplicativo com o Fornecedor, todos os componentes do aplicativo obtêm acesso aos átomos que você definiu e podem, então, interagir e atualizar o estado por meio do useAtom gancho.

importar { Fornecedor } de"jotai";

Agora envolva o aplicativo no index.js ou main.jsx como mostrado abaixo.

importar Reagir de'reagir'
importar ReactDOM de'react-dom/client'
importar Aplicativo de'./App.jsx'
importar'./index.css'
importar { Fornecedor } de"jotai";
ReactDOM.createRoot(documento.getElementById('raiz')).render(



 </Provider>
 </React.StrictMode>,
)

Configurar um armazenamento de dados

A loja atua como um repositório central para o estado do aplicativo. Ele normalmente contém a definição de átomos, seletores e quaisquer outras funções relacionadas necessárias para o gerenciamento de estado usando o Jotai.

Nesse caso, ele gerencia os átomos para gerenciar a lista de itens do aplicativo de tarefas. No origem diretório, criar TodoStore.jsx arquivo e adicione o código abaixo.

importar { átomo } de"jotai";
exportarconst TodosAtom = átomo([]);

Ao criar e exportar o TodosAtom, você pode interagir confortavelmente e atualizar o estado das tarefas em diferentes componentes do aplicativo.

Implemente a funcionalidade do aplicativo de tarefas pendentes

Agora que você configurou o Jotai no aplicativo React e criou um átomo para gerenciar o estado do aplicativo, vá adiante e crie um componente de tarefa simples que lidará com as funcionalidades de adição, exclusão e edição da tarefa Unid.

Crie um novo componentes/Todo.jsx arquivo no origem diretório. Neste arquivo, adicione o código abaixo:

1. Importe o armazenamento de dados e o useAtom gancho.

   importar Reagir, { useState } de'reagir';
   importar { TodosAtom } de'../TodoStore';
   importar { useAtom } de'jotai';

2. Crie o componente funcional e adicione os elementos JSX.

   const Tudo = () => {
   
   retornar (
   
   
    espaço reservado ="Nova tarefa"
    valor={valor}
    onChange={evento => setValue (event.target.value)}
    />
   Adicionar Todo</button>
   
   
    {todos.map(pendência => (
   
   
    {todo.texto}
    handleDelete (todo.id)}>Excluir</button>
    </li>
    ))}
    </ul>
    </div>
    );
   };