Entendendo o Zustand

O gerenciamento de estado muitas vezes parece complexo demais.

Você sabe como usar o React useState. Você sabe como passar props. Você sabe como elevar o estado (lift state up).

Mas tudo quebra quando seu app cresce. Você começa a passar dados através de componentes que não precisam deles. Isso é prop drilling. Isso torna seu código bagunçado e difícil de manter.

O Zustand resolve isso. Ele fornece ao seu app um estado compartilhado fora dos seus componentes React.

Pense desta forma:

Sem Zustand: O Componente A passa props para o B, o B passa props para o C, e o C passa props para o D.

Com Zustand: Cada componente fala diretamente com uma store central. Sem intermediários. Sem prop drilling.

Uma store do Zustand consiste em duas coisas:

  • State: Seus dados.
  • Actions: Funções que alteram seus dados.

É só isso.

O Zustand é rápido porque ele renderiza novamente apenas os componentes que utilizam os dados específicos que foram alterados.

Se você precisar que seus dados sobrevivam a uma atualização de página, use o localStorage. Como o localStorage armazena apenas strings, você deve usar JSON.stringify para salvar objetos e JSON.parse para lê-los.

Aqui está uma maneira simples de estruturar uma auth store:

  • Armazene o usuário e o token no localStorage.
  • Use uma função de login para atualizar a store e o armazenamento do navegador.
  • Use uma função de logout para limpar ambos.

Como ele se compara ao Redux?

O Redux exige dispatchers e reducers. Ele envolve muito código boilerplate. O Zustand permite que você chame uma função diretamente. Ele tem menos carga cognitiva e menos configuração.

Erros comuns para evitar:

  • Esquecer de retornar um objeto na função create. Use parênteses ao redor do seu objeto.
  • Usar ponto e vírgula dentro do seu objeto de estado. Use vírgulas em vez disso.
  • Fazer o parse de dados que já são uma string.

Bibliotecas de gerenciamento de estado não são sobre gerenciar o estado. Elas são sobre gerenciar a complexidade.

Pare de tentar memorizar cada API. Comece a olhar para o problema que a ferramenta tenta resolver. Quando você entende o problema, a ferramenta faz sentido.

Fonte: https://dev.to/chinwuba_jeffrey/understanding-zustand-2g11