Aumente o nível de manipulação de estado no React: Por que o Zustand ajuda você a gerenciar o estado como um profissional em vez do Redux?

Rabah Ali Shah

Seguir

Ouvir

Gerenciar estados é uma das partes mais desafiadoras na construção de um aplicativo que todo desenvolvedor precisa enfrentar. Sem dúvida, usando alguns React Hooks esse problema pode ser resolvido, mas gerenciar o estado pode ser cada vez mais complexo em aplicativos maiores. Nesses casos, não podemos simplesmente confiar em ganchos React muito comuns, como useState e useReducer etc. Visto que cada biblioteca traz uma solução para um problema específico. No caso do React e para gerenciamento de instruções mais complexas, Dan Abramov introduziu uma biblioteca chamada Redux.

Redux vem com um conceito incrível de armazenamento centralizado que está disponível de forma independente em todo o seu aplicativo React. Este conceito ajuda o desenvolvedor a não se preocupar em obter o estado atual de um componente ou em manipulá-lo. Tudo o que você precisa fazer é agrupar o armazenamento no provedor no nível superior do seu aplicativo React e as funções de importação usando alguns ganchos Redux nos componentes onde deseja ler o estado atual ou manipulá-lo.

Criando Loja Redux:

É assim que você cria um armazenamento Redux que contém estados iniciais, funções redutoras ou ações que queremos realizar em nossos estados para atualizar seus estados atuais. Para este caso, este armazenamento contém na verdade toda a lógica de um contador simples que soma ou subtrai valores clicando no botão “Incrementar” ou “Decrementar” respectivamente.

Depois de criarmos nossa loja, é hora de vinculá-la ao nosso componente React:

Além de nosso aplicativo no arquivo index.js, estamos fornecendo a loja Redux para o aplicativo. Em palavras simples, estamos declarando nossa loja no nível superior de nosso aplicativo React para que seu estado esteja disponível para todos os seus elementos filhos.

Agora indo para o arquivo onde queremos usar nosso Redux Store:

Você precisará do gancho useSelector para obter os dados do armazenamento Redux e, em seguida, usando o gancho useDispatch, você pode chamar a ação para atualizar seu estado.

É assim que você gerencia estados no Redux.

O problema que você deve ter notado é o longo padrão do Redux. Mesmo para gerenciar lógicas tão simples, você precisa configurar todos os padrões Redux mencionados acima. E às vezes isso se torna complexo para entender o que está acontecendo com o Redux porque para obter os dados você precisa de um gancho useSelector extra e para chamar sua ação você precisa do gancho useDispatch. O que se torna agitado para usar em aplicativos maiores onde o gerenciamento de estado é muito mais complexo.

A solução para este problema é Zustand. Esta é uma solução de gerenciamento de estado React pequena, rápida e escalonável que usa princípios de fluxo simplificados. Zustand vem com o mesmo conceito de loja centralizada que gerencia seu estado e está disponível em todo seu aplicativo.

A melhor coisa sobre o Zustand é que, diferentemente do Redux, você não precisa configurar um clichê longo e usar ganchos extras para ler, chamar e manipular estados. Tudo que você precisa é criar uma loja e simplesmente usá-la em qualquer lugar do seu aplicativo React. Não há necessidade de agrupar seu provedor no nível superior do aplicativo.

Criando armazenamento de condições:

Veja como é simples criar uma loja no Zustand. Apenas usando a função create. Depois de criar sua loja com Zustand. É hora de vinculá-lo ao seu componente onde você deseja ler os dados da sua loja.

É assim que você chamará suas funções redutoras, as chamadas ações. Simplesmente importe sua ação e chame-a. É isso! NÃO há necessidade de ganchos extras para ler e despachar ações. Basta importá-los e usá-los.

Espero que depois de ver todo o código acima, a simplicidade do Zustand e sua comparação com o Redux você tenha obtido sua resposta, mas ainda a seguir estão algumas vantagens que você obterá ao usar o Zustand.

Gerenciar estados pode ser um desafio em aplicações maiores e mais complexas. Sem dúvida, Redux e ganchos como useContext, useReducer estão aqui para nos ajudar. Mas o problema é que a longa e complexa configuração padrão torna o Redux menos amigável ao gerenciar estados.

Aí vem o Zustand, uma solução de gerenciamento de estado pequena, rápida e escalonável para aplicativos React. Sua simplicidade, configuração menos padronizada e comportamentos de gerenciamento de estado fáceis de usar o tornam mais favorável que o Redux. Sinta-se à vontade para usar o Zustand em sua produção e desfrutar da beleza de gerenciar estados de forma limpa e simples.