Zustand é uma biblioteca de gerenciamento de estado pequena, rápida e escalonável para React, que serve como uma alternativa para soluções mais complexas como Redux. A principal razão pela qual o Zustand ganhou tanta força é seu tamanho pequeno e sintaxe simples em comparação com o Redux.

Entenda a configuração do Zustand

Primeiro, você precisa instalar o Zustand e o TypeScript, caso ainda não o tenha feito.

npm install zustand
'or'
yarn add zustand

Zustand fornece uma função de criação para definir sua loja. Vejamos um exemplo básico onde armazenamos e manipulamos um valor de contagem.

Vamos criar um arquivo chamado store.ts onde temos um gancho personalizado useCounterStore():

import { create } from "zustand"

type CounterStore = {
    count: number
    increment: () => void
    resetCount: () => void
}

export const useCounterStore = create((set) => ({
    count: 0
    increment: () => set((state) => ({ count: state.count   1 })),
    resetCount: () => set({ count: 0 })
}))

Neste exemplo:

• count é um pedaço de estado.

• increaseCount e resetCount são ações que modificam o estado.

• set é uma função fornecida pelo Zustand para atualizar a loja.

Usando a loja em um componente React

import React from 'react'
import { useCounterStore } from './store'

const Counter: React.FC = () => {
  const count = useCounterStore((state) => state.count) // Get count from the store
  const increment = useCounterStore((state) => state.increment) // Get the action

  return (
    

      
{count}
      Increase Count
    
  )
}

export default Counter;

Aqui, Counter é um componente React. Como você pode ver, useCounterState() é usado para acessar contagem e incremento.

Você pode desestruturar o estado em vez de obtê-los diretamente, como acontece a seguir:

const {count, increment} = useCounterStore((state) => state)

Mas essa abordagem reduz o desempenho. Portanto, a melhor prática é obter acesso ao estado diretamente, como mostrado antes.

Ações assíncronas

Fazer uma ação assíncrona ou chamar uma solicitação de API para o servidor também é bastante simples no Zustand. Aqui, o código a seguir explica tudo:

export const useCounterStore = create((set) => ({
    count: 0
    increment: () => set((state) => ({ count: state.count   1 })),
    incrementAsync: async () => {
        await new Promise((resolve) => setTimeout(resolve, 1000))
        set((state) => ({ count: state.count   1 }))
    },
    resetCount: () => set({ count: 0 })
}))

Não parece uma função assíncrona genérica em JavaScript? Primeiro de tudo ele executa o código assíncrono e depois define o estado com o valor fornecido.

Agora, vamos ver como você pode usá-lo em um componente de reação:

const OtherComponent = ({ count }: { count: number }) => {
  const incrementAsync = useCounterStore((state) => state.incrementAsync)

  return (
    

      {count}
      

        Increment
      
    
  )
}

Como acessar o estado fora do componente React

Até agora, você acessou apenas o estado dentro dos componentes do React. Mas e quanto ao acesso ao estado fora dos componentes do React? Sim, com Zustand você pode acessar o estado de fora dos componentes do React.

const getCount = () => {
  const count = useCounterStore.getState().count
  console.log("count", count)
}

const OtherComponent = ({ count }: { count: number }) => {
  const incrementAsync = useCounterStore((state) => state.incrementAsync)
  const decrement = useCounterStore((state) => state.decrement)

  useEffect(() => {
    getCount()
  }, [])

  return (
    

      {count}
      

        Increment
        Decrement
      
    
  )
}

Aqui, você pode ver que getCount() está acessando o estado por getState()

Também podemos definir a contagem:

const setCount = () => {
  useCounterStore.setState({ count: 10 })
}

Persistir Middleware

O middleware persistente no Zustand é usado para persistir e reidratar o estado nas sessões do navegador, normalmente usando localStorage ou sessionStorage. Este recurso permite manter o estado mesmo após o recarregamento da página ou quando o usuário fecha e reabre o navegador. Aqui está uma análise detalhada de como funciona e como usá-lo.

Uso básico de persistir

Veja como configurar uma loja Zustand com persist:

import create from 'zustand';
import { persist } from 'zustand/middleware';

// Define the state and actions
interface BearState {
  bears: number;
  increase: () => void;
  reset: () => void;
}

// Create a store with persist middleware
export const useStore = create(
  persist(
    (set) => ({
      bears: 0,
      increase: () => set((state) => ({ bears: state.bears   1 })),
      reset: () => set({ bears: 0 }),
    }),
    {
      name: 'bear-storage', // Name of the key in localStorage
    }
  )
);

O estado é salvo na chave "bear-storage" em localStorage. Agora, mesmo se você atualizar a página, o número de ursos persistirá durante as recargas.

Por padrão, persist usa localStorage, mas você pode alterá-lo para sessionStorage ou qualquer outro sistema de armazenamento. Há muitas coisas a abordar sobre o tema do estado persistente em Zustand. Você receberá um tutorial/postagem detalhado sobre este tópico, que seguirá este post.

Conclusão

Todos nós sabemos o quão excelente é o Redux como ferramenta de gerenciamento de estado. Mas Redux possui um padrão bastante complexo e grande. É por isso que cada vez mais desenvolvedores estão escolhendo o Zustand como sua ferramenta de gerenciamento de estado, que é simples e escalável.

Mas você ainda verá que o Redux é mais recomendado para gerenciamento de estados seriamente complexos e aninhados.