Usando Zustand com Context API para Gerenciamento de Estado

O Zustand é uma biblioteca de gerenciamento de estado conhecida por sua simplicidade e eficiência. Uma funcionalidade interessante é a possibilidade de integrá-lo com a Context API do React. Isso permite que você tenha mais controle sobre o ciclo de vida das stores, criando e destruindo-as conforme necessário, com base na estrutura da sua aplicação React.

Essa abordagem pode ser especialmente útil para:

• Gerenciar stores que precisam existir apenas durante o ciclo de vida de um componente ou uma árvore específica.
• Manter estados isolados em diferentes partes da aplicação.
• Otimizar recursos, garantindo que as stores sejam criadas apenas quando realmente necessárias.

Neste post, vamos explorar como integrar o Zustand com a Context API, passo a passo.

Criando a Integração em 4 Etapas

1. Configurando a Store com Zustand e Provider de Contexto

Começamos criando a store com Zustand. Aqui, configuramos o estado e as ações básicas, além de configurar o contexto básico do react:

import create from 'zustand'; import React, { createContext, useContext, useRef } from 'react';                                             const CounterContext = createContext(null); export const CounterProvider: React.FC = ({ children }) => {   const storeRef = useRef(null);   if (!storeRef.current) {     storeRef.current = create((set) => ({       count: 0,       increment: () => set((state) => ({ count: state.count + 1 })),       decrement: () => set((state) => ({ count: state.count - 1 })),     }));   }   return (     <CounterContext.Provider value={storeRef.current}>       {children}     </CounterContext.Provider>   ); };

2. Criando o react hook básico para consumir o contexto

Em seguida, no mesmo arquivo, criamos o hook básico do react para consumir o contexto que está a store. Com isso estamos prontos para integrar o provider na aplicação e utilizar o state do o zustand:

import React, { createContext, useContext, useRef } from 'react'; ... export const useCounterContext = () => {   const store = useContext(CounterContext);   if (!store) {     throw new Error('useCounterContext must be used within a CounterProvider');                     }   return store; };

3. Consumindo a Store no Componente

Com o contexto configurado, podemos acessar o estado e as ações da store em qualquer componente que esteja dentro do Provider.

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

4. Integrando no App

Por fim, adicionamos o Provider ao componente principal, garantindo que a store seja criada e acessível para os componentes que dela dependem.

import React from 'react'; import ReactDOM from 'react-dom'; import { CounterProvider } from './CounterProvider';                                                                   import Counter from './Counter'; ReactDOM.render(   <CounterProvider>     <Counter />   </CounterProvider>,   document.getElementById('root') );

Conclusão

Ao integrar Zustand com a Context API, você ganha controle total sobre a criação e destruição das stores, garantindo um gerenciamento de estado mais eficiente e organizado. Essa abordagem é ideal para aplicações que demandam maior flexibilidade no uso do estado em diferentes partes da árvore de componentes.

Nos próximos posts, exploraremos outros aspectos do Zustand, como persistência de estado e estratégias para trabalhar com múltiplas stores. Não perca! 🚀