Para gerenciar o estado em frameworks front-end modernos, o Redux sempre foi rei. Mas agora, muitos novos concorrentes estão entrando na briga com novas ideias, desesperados para derrubar o Redux com a promessa de facilidade de uso e simplicidade.

Eu, pelo menos, estou entusiasmado com o número crescente de novas maneiras de gerenciar seu estado. Neste artigo, irei cobrir provavelmente o mais simples e o menor de todos: Zustand .

Você aprenderá o que é Zustand, como ele difere de outras ferramentas modernas, como Jotai ou Recoil, e quando você deve usá-lo no Redux.

O que é Zustand?

Em primeiro lugar, não estou afirmando que o Zustand seja atualmente a melhor ferramenta a ser usada. Como na maioria dos casos, a questão de qual ferramenta é a melhor não pode realmente ser respondida, ou pelo menos deve ser respondida com a temida frase: “Depende”.

Para ter uma visão completa de Zustand, vamos examinar alguns dos detalhes da biblioteca e como ela está posicionada no mercado e em comparação com outras bibliotecas.

Zustand foi criado e é mantido pelos criadores de react-spring , react-three-fibre e muitas outras ferramentas incríveis, Poimandres . Com 1,5 kB, é provavelmente a menor biblioteca de todas-você pode ler o código-fonte em questão de minutos.

Primeiros passos com Zustand

Zustand é conhecido por sua simplicidade. No (realmente lindo) site que eles criaram para o pacote, você pode ver um exemplo muito simples escrito em apenas quatro linhas de código que cria um estado disponível globalmente:

 importar criar de'zustand' const useStore=create (set=> ({ ursos: 0, boostPopulation: ()=> set (state=> ({bears: state.bears + 1})),
}))

A função principal da biblioteca de gerenciamento de estado é chamada criar . Ele aceita uma função de retorno de chamada como seu primeiro argumento, que por sua vez aceita uma função set que deve ser usada ao manipular a memória.

A função create então retorna outra função, que em nosso caso, é chamada de useStore . Como você pode ver pelo nome do valor de retorno, ele retorna um gancho, então você pode inseri-lo em qualquer lugar em seu aplicativo React, assim:

função

 BearCounter () { const bears=useStore (state=> state.bears) retorne 
 {bears} por aqui... 
}

Onde quer que esse gancho seja injetado e o estado seja usado, o componente será renderizado novamente quando o estado for alterado, tornando-o um estado global totalmente funcional com essas pequenas linhas de código.

Você também pode extrair a ação, que muda o estado em qualquer lugar que você quiser do mesmo gancho, como este:

 function Controls () { const boostPopulation=useStore (state=> state.increasePopulation) retornar  um up 
}

Mas e quanto a realizar ações assíncronas ou buscar algo em um servidor que você salva em sua loja?

 const useStore=create (set=> ({ peixinhos: {}, buscar: lagoa assíncrona=> { resposta const=aguarda busca (lagoa) set ({fishies: await response.json ()}) }
}))

Bem, você pode tornar sua função de mutação assíncrona e Zustand definirá seu estado quando estiver pronto. Dessa forma, você não precisa mais se preocupar com funções assíncronas dentro do seu componente.

A gestão do estado quase não pode ser mais simples, certo? Mas parece muito semelhante a outras ferramentas modernas como Jotai ou Recoil, você disse? Pode parecer assim, mas vamos dar uma olhada em algumas das diferenças entre essas bibliotecas.

Qual é a diferença entre Zustand e Jotai e Recoil?

Curiosamente, as bibliotecas Jotai e Zustand são dos mesmos criadores. Mas a diferença está no modal mental e em como você gostaria de estruturar seu aplicativo.

Zustand é basicamente um armazenamento único (você pode criar vários armazenamentos, mas eles são separados). Jotai são átomos primitivos e os compõem. Nesse sentido, trata-se de programar o modelo mental.

Jotai pode ser visto como um substituto para useState + useContext. Em vez de criar vários contextos, os átomos compartilham um grande contexto. Zustand é uma loja externa e o gancho é conectar o mundo externo ao mundo React.

A última frase é, na minha opinião, a mais importante quando se trata do que torna o Zustand tão diferente de outras ferramentas de gerenciamento de estado. Basicamente, foi criado para o React, mas não está vinculado a ele.

Isso significa que pode ser uma ferramenta para conectar o mundo React com o mundo não React. Como isso é possível? Porque o estado não é construído sobre a API de contexto do react. Você provavelmente também percebeu que não precisa adicionar um provedor raiz em algum lugar do seu aplicativo durante a instalação.

O que torna Zustand tão especial?

Aqui está o que me impressiona em Zustand.

1. Você PODE usar o Redux devtools . Um dos primeiros argumentos que você obtém ao discutir Redux versus outra biblioteca é que as ferramentas de desenvolvimento Redux são poderosas. Em primeiro lugar, não acho que você deva decidir uma biblioteca apenas por suas ferramentas de depuração, mas é um argumento válido. Mas em Zustand, você pode usar a ferramenta de depuração como seria na loja Redux. Não é incrível?
   
2. Zustand não é apenas para React . Já mencionei isso antes, mas o que torna o Zustand uma ótima ferramenta é que ele não está vinculado ao contexto React e, portanto, nem mesmo vinculado ao uso dentro de um aplicativo React ou do próprio React. Por exemplo, você pode combinar o estado de diferentes aplicativos, não importa qual estrutura eles usam (estou olhando para você, micro frontends).
3. É 100% sem opinião . Bem, isso parece bastante óbvio, mas no mundo do gerenciamento de estado em React, eu imediatamente entrei no movimento do ecossistema Redux sem nem mesmo pensar nos benefícios que isso poderia trazer. Zustand é um dos exemplos (e isso também é verdadeiro para outras bibliotecas como Jotai ou Recoil) em que a simplicidade vence o excesso de engenharia.
4. Zustand oferece um middleware integrado incrível . Zustand vem com um bom middleware incluído com baterias, como o recurso persist , que mantém sua loja onde você quiser. Esta é a única coisa que você precisa fazer para tornar seu estado persistente no sessionStorage de seu aplicativo:

 importar criar de"zustand"
importar {persist} de"zustand/middleware" export const useStore=create (persist ( (definir, obter)=> ({ peixes: 0, addAFish: ()=> set ({fish: get (). fish + 1}) }), { nome:"armazenamento de alimentos",//nome exclusivo getStorage: ()=> sessionStorage,//(opcional) por padrão, o'localStorage'é usado }
)) 

Desvantagens de usar Zustand

No geral, Zustand é uma ótima biblioteca para programadores pragmáticos e aqueles que usam React, mas em combinação com outra biblioteca.

No entanto, Zustand tem seus prós e contras.

1. A documentação pode ser melhorada . No momento da escrita, a única documentação no momento é a leia-me do projeto . É bem escrito para que você possa entender facilmente a biblioteca, mas não cobre 100% de todos os casos de uso. Por exemplo, se olharmos para a função persist , você pode ver duas opções de configuração no exemplo, mas para ver todas as opções disponíveis, você precisa abrir o código e verificar a implementação diretamente. Ou, se estiver usando TypeScript, você pode descobrir pela digitação.
2. A estrutura da loja é desajeitada . A criação de uma loja deve sempre ser feita dentro da função criar , e as funções de edição precisam da função definir adicionada à função de retorno de chamada. Isso significa que você deve escrever suas funções de estado dentro do escopo da função de retorno de chamada ou deve passar a função set para ela. Isso pode ser complicado ao escrever funções de manipulação mais complexas.

O estado atual do gerenciamento de estado

Na minha opinião, os dias em que usamos o Redux originalmente estão contados. O gerenciamento de estado global pode ser bastante complicado e, portanto, deve ser algo que não seja artificialmente complicado.

Não estou dizendo que o Redux não é útil, mas pode fazer com que você faça uma engenharia excessiva em seu estado inicialmente simples, e é por isso que fiquei tão impressionado com a ideia de que Zustand apregoa simplicidade. Agora, temos muitas opções para escolher, então Redux pode não ser mais o padrão para todos os seus gestores de estado.

Mas no final, pode realmente variar de projeto para projeto e dizer que agora existe essa biblioteca que resolve todos os nossos problemas não é realista, mas pelo menos agora estamos obtendo mais e mais opções e deveria não é a opção padrão para escolher Redux para o gerenciamento de estado em todos os aplicativos.

A postagem Usando Zustand para simplificar o gerenciamento de estado apareceu primeiro no LogRocket Blog .

Source link