Uso en Componentes

Esta documentación explica cómo utilizar el store de Zustand en los componentes de React.

Importación básica

import { useAppStore } from '@/stores/app-store';

Obtener valores del estado

Hay dos formas principales de obtener valores del estado:

1. Selección directa

const Component = () => {
  const cart = useAppStore(state => state.cart);
  const isLoggedUser = useAppStore(state => state.isLoggedUser);

  return (
    <div>
      {isLoggedUser ? 'Usuario logueado' : 'Usuario invitado'}
      {cart && <p>Tienes {cart.items.length} productos en tu carrito</p>}
    </div>
  );
};

2. Múltiples selectores

const Component = () => {
  const {
    cart,
    isLoggedUser,
    getCart
  } = useAppStore(state => ({
    cart: state.cart,
    isLoggedUser: state.isLoggedUser,
    getCart: state.getCart
  }));

  return (
    <div>
      {/* Uso de los valores seleccionados */}
    </div>
  );
};

Uso de acciones

Las acciones se pueden obtener igual que los valores del estado:

const Component = () => {
  const addProduct = useAppStore(state => state.addProduct);

  const handleAddToCart = async () => {
    await addProduct('SKU123', 1, { isArmed: true });
  };

  return (
    <button onClick={handleAddToCart}>
      Añadir al carrito
    </button>
  );
};

Ejemplo real: Página de categoría

const CategoryPage = (props) => {
  const setCurrentCategory = useAppStore(state => state.setCurrentCategory);
  const setTagPromotions = useAppStore(state => state.setTagPromotions);

  const {
    category,
    tagPromotions,
  } = props;

  // Actualizamos el estado con los datos de la página
  setCurrentCategory(category);
  setTagPromotions(tagPromotions);

  return (
    // Contenido de la página
  );
};

Optimización del rendimiento

Para evitar renders innecesarios, es importante seleccionar sólo los valores que realmente necesita el componente:

❌ Mal (causa re-renders innecesarios)

const entireState = useAppStore();
const { cart } = entireState;

✅ Bien (solo re-renderiza cuando cart cambia)

const cart = useAppStore(state => state.cart);

Acciones asíncronas

Para acciones asíncronas, como cargar datos del carrito:

const Component = () => {
  const getCart = useAppStore(state => state.getCart);
  const cart = useAppStore(state => state.cart);

  useEffect(() => {
    // Cargamos el carrito al montar el componente
    getCart();
  }, [getCart]);

  return (
    // Renderizado con los datos del carrito
  );
};