Persistindo Estado com Zustand: Salvando Dados Facilmente no LocalStorage

Se você já trabalhou com React e gerenciamento de estado, provavelmente se deparou com a necessidade de salvar dados entre as sessões do usuário. É aqui que a persistência de estado entra em cena. O Zustand torna isso incrivelmente simples, graças ao middleware persist, que facilita o armazenamento de estados no LocalStorage (ou qualquer outro mecanismo de armazenamento que você precise).

Neste post, vamos explorar:

• Por que persistir estado é importante.
• Como usar o middleware persist do Zustand.
• Um exemplo prático de persistência em um contador.

Por que persistir estado?

Imagine que você está desenvolvendo uma aplicação de tarefas ou um carrinho de compras. Se o usuário recarregar a página e perder os dados, a experiência será frustrante. Persistir o estado garante que informações importantes sejam mantidas mesmo após um refresh ou quando o navegador for fechado.

Com o Zustand, essa funcionalidade é implementada de forma direta e eficiente, permitindo que você foque no desenvolvimento sem reinventar a roda.

Usando o Middleware persist do Zustand

O middleware persist permite configurar a persistência de forma simples. Você pode armazenar o estado no LocalStorage e configurá-lo para ser recuperado automaticamente ao carregar a aplicação.

Veja como configurar:

import { create } from 'zustand'; import { persist } from 'zustand/middleware'; const useCounterStore = create(   persist(     (set) => ({       count: 0, // Estado inicial       increment: () => set((state) => ({ count: state.count + 1 })),       decrement: () => set((state) => ({ count: state.count - 1 })),     }),     {       name: 'counter-storage', // Nome da chave no LocalStorage               }   ) );

O que está acontecendo aqui?

• persist: Middleware que envolve a store, adicionando persistência.
• name: Define a chave usada no LocalStorage para armazenar os dados.

Com essa configuração, o estado da store será automaticamente salvo e recuperado do LocalStorage.

Exemplo Prático: Salvando o Estado de um Contador

Agora que configuramos a store, vamos usá-la em um componente React:

import React from 'react'; import { useCounterStore } from './store'; function Counter() {   const count = useCounterStore((state) => state.count);   const increment = useCounterStore((state) => state.increment);   const decrement = useCounterStore((state) => state.decrement);             return (     <div>       <h1>Count: {count}</h1>       <button onClick={increment}>Increment</button>       <button onClick={decrement}>Decrement</button>     </div>   ); } export default Counter;

Quando você recarregar a página, verá que o contador mantém seu valor, graças ao LocalStorage!

Conclusão

A persistência de estado no Zustand é uma solução prática e poderosa para garantir uma experiência de usuário contínua, mesmo em cenários onde o estado precisa ser mantido entre sessões. Com o middleware persist, a configuração é simples e direta, permitindo que você economize tempo e se concentre no que realmente importa: criar uma aplicação incrível.

Nos próximos posts, exploraremos outros recursos avançados do Zustand. Fique ligado!

Fontes

• Documentação Oficial do Zustand: Saiba mais sobre o middleware persist.
• Leveraging the Power of LocalStorage: Conceitos gerais sobre persistência de dados.