Configuración y uso básico de Zustand

npm install zustand

// stores/counter-store.ts
import { create } from "zustand";
 
interface CounterState {
  count: number;
  increment: () => void;
  decrement: () => void;
  reset: () => void;
}
 
export const useCounterStore = create<CounterState>((set) => ({
  count: 0,
  increment: () => set((state) => ({ count: state.count + 1 })),
  decrement: () => set((state) => ({ count: state.count - 1 })),
  reset: () => set({ count: 0 }),
}));

"use client";
 
import { useCounterStore } from "@/stores/counter-store";
 
function Counter() {
  const count = useCounterStore((state) => state.count);
  const increment = useCounterStore((state) => state.increment);
 
  return (
    <div>
      <p>Recuento: {count}</p>
      <button onClick={increment}>+1</button>
    </div>
  );
}

// stores/todo-store.ts
import { create } from "zustand";
 
interface Todo {
  id: string;
  text: string;
  done: boolean;
}
 
interface TodoState {
  todos: Todo[];
  addTodo: (text: string) => void;
  toggleTodo: (id: string) => void;
  removeTodo: (id: string) => void;
  clearCompleted: () => void;
}
 
export const useTodoStore = create<TodoState>((set) => ({
  todos: [],
 
  addTodo: (text) =>
    set((state) => ({
      todos: [...state.todos, { id: crypto.randomUUID(), text, done: false }],
    })),
 
  toggleTodo: (id) =>
    set((state) => ({
      todos: state.todos.map((t) => (t.id === id ? { ...t, done: !t.done } : t)),
    })),
 
  removeTodo: (id) =>
    set((state) => ({
      todos: state.todos.filter((t) => t.id !== id),
    })),
 
  clearCompleted: () =>
    set((state) => ({
      todos: state.todos.filter((t) => !t.done),
    })),
}));

// components/todo-app.tsx
"use client";
 
import { useState } from "react";
import { useTodoStore } from "@/stores/todo-store";
 
export function TodoApp() {
  const [input, setInput] = useState("");
  const todos = useTodoStore((s) => s.todos);
  const addTodo = useTodoStore((s) => s.addTodo);
  const toggleTodo = useTodoStore((s) => s.toggleTodo);
  const removeTodo = useTodoStore((s) => s.removeTodo);
  const clearCompleted = useTodoStore((s) => s.clearCompleted);
 
  const handleSubmit = (e: React.FormEvent) => {
    e.preventDefault();
    if (input.trim()) {
      addTodo(input.trim());
      setInput("");
    }
  };
 
  return (
    <div>
      <form onSubmit={handleSubmit}>
        <input value={input} onChange={(e) => setInput(e.target.value)} />
        <button type="submit">Añadir</button>
      </form>
 
      <ul>
        {todos.map((todo) => (
          <li key={todo.id}>
            <label>
              <input
                type="checkbox"
                checked={todo.done}
                onChange={() => toggleTodo(todo.id)}
              />
              <span style={{ textDecoration: todo.done ? "line-through" : "none" }}>
                {todo.text}
              </span>
            </label>
            <button onClick={() => removeTodo(todo.id)}>Eliminar</button>
          </li>
        ))}
      </ul>
 
      <button onClick={clearCompleted}>Limpiar completados</button>
      <p>{todos.filter((t) => !t.done).length} elementos restantes</p>
    </div>
  );
}

const { count, increment } = useCounterStore();
// Re-renderiza ante CUALQUIER cambio de state

// Accede al state directamente (sin hooks)
const count = useCounterStore.getState().count;
 
// Suscríbete a los cambios
const unsub = useCounterStore.subscribe((state) => {
  console.log("El recuento cambió:", state.count);
});

set({ count: 0 }, true); // El segundo argumento `true` reemplaza todo el state

import { create, StoreApi } from "zustand";
 
type Store = StoreApi<CounterState>;

// Ejemplo en producción: store de auth
// File: src/stores/auth.ts
import { create } from 'zustand'
import { User } from '@supabase/supabase-js'
 
interface AuthState {
  user: User | null
  loading: boolean
  setUser: (user: User | null) => void
  setLoading: (loading: boolean) => void
}
 
export const useAuthStore = create<AuthState>()((set) => ({
  user: null,
  loading: true,
  setUser: (user) => set({ user }),
  setLoading: (loading) => set({ loading }),
}))
 
// Uso con selector (evita re-renderizados por cambios de state no relacionados):
// const user = useAuthStore((state) => state.user)
// NO: const { user } = useAuthStore()  // se suscribe a TODOS los cambios