Gerenciamento de Estado em React: por que e como usar o Zustand

Gerenciamento de Estado em React: por que e como usar o Zustand | Alura Cursos Online

import { create } from 'zustand'; 
 
const useWishlistStore = create((set) => ({ 
  wishlist: [], 
  addToWishlist: (product) =>  
    set((state) => ({  
      wishlist: [...state.wishlist, product]  
    })), 
  removeFromWishlist: (productId) =>  
    set((state) => ({  
      wishlist: state.wishlist.filter((p) => p.id !== productId)  
    })), 
})); 
 
export default useWishlistStore;

import useWishlistStore from '../store/useWishlistStore'; 
 
const products = [ 
  { id: 1, name: 'Tênis de Corrida', price: 'R$ 299' }, 
  { id: 2, name: 'Fone Bluetooth', price: 'R$ 150' }, 
  { id: 3, name: 'Mochila Tech', price: 'R$ 180' }, 
]; 
 
function ProductList() { 
  const add = useWishlistStore((state) => state.addToWishlist); 
  const currentWishlist = useWishlistStore((state) => state.wishlist); 
 
  return ( 
    <section style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(200px, 1fr))', gap: '20px' }}> 
      {products.map((product) => { 
        const isFavorite = currentWishlist.some(item => item.id === product.id); 
         
        return ( 
          <div key={product.id} style={{ border: '1px solid #ddd', borderRadius: '12px', padding: '16px', textAlign: 'center', boxShadow: '0 4px 6px rgba(0,0,0,0.05)' }}> 
            <h3 style={{ fontSize: '1.1rem', marginBottom: '8px' }}>{product.name}</h3> 
            <p style={{ color: '#666', fontWeight: 'bold' }}>{product.price}</p> 
            <button  
              disabled={isFavorite} 
              onClick={() => add(product)} 
              style={{  
                backgroundColor: isFavorite ? '#ccc' : '#ff4d4d',  
                color: 'white', border: 'none', padding: '8px 16px', borderRadius: '20px', cursor: 'pointer', transition: '0.3s'  
              }}> 
              {isFavorite ? 'Na Lista' : 'Favoritar'} 
            </button> 
          </div> 
        ); 
      })} 
    </section> 
  ); 
} 
 
export default ProductList;

import useWishlistStore from '../store/useWishlistStore'; 
 
function Wishlist() { 
  const { wishlist, removeFromWishlist } = { ...useWishlistStore() }; 
 
  return ( 
    <div style={{ background: '#fdf2f2', padding: '24px', borderRadius: '16px', marginTop: '40px' }}> 
      <h2 style={{ color: '#d32f2f' }}>Minha Wishlist ({wishlist.length})</h2> 
      {wishlist.length === 0 ? <p>Sua lista está vazia. Comece a favoritar!</p> : ( 
        <ul style={{ listStyle: 'none', padding: 0 }}> 
          {wishlist.map((item) => ( 
            <li key={item.id} style={{ display: 'flex', justifyContent: 'space-between', padding: '12px 0', borderBottom: '1px solid #eee' }}> 
              <span>{item.name}</span> 
              <button onClick={() => removeFromWishlist(item.id)} style={{ background: 'none', border: 'none', cursor: 'pointer', fontSize: '1.2rem' }}>Remover</button> 
            </li> 
          ))} 
        </ul> 
      )} 
    </div> 
  ); 
} 
 
export default Wishlist;

Outras empresas do Grupo Alun

Outras empresas do Grupo Alun

Outras empresas do Grupo Alun

Outras empresas do Grupo Alun

Gerenciamento de Estado em React: por que e como usar o Zustand

Rafaela Petelin Silvério

Explore por tópico

Como usar Zustand em seu projeto: gerenciando estado em uma wishlist

1. Preparando o Ambiente

2. Criando a Store

3. A Vitrine de Produtos

4. A Lista de Desejos

Quer dominar React e levar seu desenvolvimento para o próximo nível?

FAQ | Perguntas Frequentes sobre React (FAQ)

1. Porque usar Zustand?

2. Qual a diferença entre Zustand e Context API?

3. Qual a diferença entre Zustand e Redux?

4. O Zustand funciona com TypeScript?

Rafaela Petelin Silvério

Inscreva-se em nossa Newsletter

Explore por tópico

Como usar Zustand em seu projeto: gerenciando estado em uma wishlist

1. Preparando o Ambiente

2. Criando a Store

3. A Vitrine de Produtos

4. A Lista de Desejos

Quer dominar React e levar seu desenvolvimento para o próximo nível?

FAQ | Perguntas Frequentes sobre React (FAQ)

1. Porque usar Zustand?

2. Qual a diferença entre Zustand e Context API?

3. Qual a diferença entre Zustand e Redux?

4. O Zustand funciona com TypeScript?

Leia também