Dominando el Hook useActionState de React

---

import { useActionState } from "react";

const [state, formAction, isPending] = useActionState(actionFn, initialState);

// Debe ser un componente de cliente si maneja la interacción del DOM.
"use client"; 
import { useActionState } from "react";

  // 1. La función Action (simulando una operación asíncrona en el servidor)
  async function increment(previousState, formData) {
    // previousState es el valor actual de 'state' (el contador).
    
    // Simulación de un retraso asíncrono (ej. una llamada a base de datos)
    await new Promise(resolve => setTimeout(resolve, 1000)); 
    
    // Devuelve el nuevo estado.
    return previousState + 1; 
}

function CounterForm() {
  // Inicializamos el estado en 0. 'state' es el valor, 'formAction' es la prop del form.
  const [state, formAction] = useActionState(increment, 0); 

  return (
    // 2. Conectamos la función 'formAction' a la prop 'action' del formulario.
    <form action={formAction}>
      <p>Contador: {state}</p>
      {/* 3. El botón de tipo submit activa la action. */}
      <button type="submit">Incrementar</button>
    </form>
  );
}

export default CounterForm;

"use client";
import { useActionState } from "react";

// La función de acción que procesa los datos y devuelve el nuevo estado (mensaje).
async function submitForm(prevState, formData) {
  // Simulación de un proceso de envío (ej. una petición API)
  await new Promise((resolve) => setTimeout(resolve, 1500));
  
  // Accedemos a los datos del formulario usando formData.get()
  const email = formData.get("email"); 
  
  // Lógica de validación
  if (!email || !email.includes("@")) {
    // Si falla, devolvemos el nuevo estado con un mensaje de error.
    return { 
      success: false, 
      message: "Por favor, introduce una dirección de correo válida." 
    };
}

  // Si tiene éxito, devolvemos el nuevo estado con un mensaje de éxito.
  return { 
    success: true, 
    message: "¡Formulario enviado con éxito!" 
  };
}

function FeedbackForm() {
  // El estado inicial es un objeto para almacenar el éxito y el mensaje.
  // Capturamos el tercer valor: isPending.
  const [state, formAction, isPending] = useActionState(submitForm, { 
    success: null, 
    message: "" 
  }); 

return (
    <form action={formAction}>
      <input type="text" name="name" placeholder="Nombre" />
      <input type="email" name="email" placeholder="Correo Electrónico" />
      
      {/* Deshabilitamos el botón mientras la acción está pendiente */}
      <button type="submit" disabled={isPending}>
        {isPending ? "Enviando..." : "Enviar"}
      </button>
      
      {/* Mostramos el mensaje de retroalimentación usando el estado */}
      {state.message && (
        <p className={state.success ? "success" : "error"}>
          {state.message}
        </p>
      )}
    </form>
  );
}

export default FeedbackForm;

// --- Archivo: actions.ts (Server Component) ---
"use server"; 

// Simula la actualización del estado "Me Gusta" en una base de datos.
export async function toggleLike(prevLiked) {
  // Simulación de espera del servidor
  await new Promise((res) => setTimeout(res, 1000));
  // El nuevo estado es el opuesto al anterior (true/false)
  return !prevLiked; 
}


// --- Archivo: LikeButton.tsx (Client Component) ---
"use client"; 

import { useActionState } from "react";
// Importamos la Server Action
import { toggleLike } from "./actions"; 

function LikeButton() {
  // Estado inicial es 'false' (no le gusta).
  const [liked, formAction] = useActionState(toggleLike, false); 

  return (
    // Conectamos el formulario con la Server Action
    <form action={formAction}>
      <button className="like-button">
        {/* Usamos el estado 'liked' para cambiar el texto del botón */}
        {liked ? " ❤️ Me Gusta" : "♡ Me Gusta"}
      </button>
    </form>
  );
}

export default LikeButton;

// --- Archivo: actions.ts (Server Component) ---
"use server"; 

// Definimos las dos acciones asíncronas
export async function toggleLike(prevLiked) {
  await new Promise((res) => setTimeout(res, 800));
  return !prevLiked;
}

export async function toggleFollow(prevFollowing) {
  // Simulación de espera del servidor
  await new Promise((res) => setTimeout(res, 1000));
  // El nuevo estado es el opuesto al anterior (true/false)
  return !prevFollowing;
}


// --- Archivo: SocialActions.tsx (Client Component) ---
"use client"; 
import { useActionState } from "react";
import { toggleLike, toggleFollow } from "./actions";

function SocialActions() {
  // 1. Primer useActionState para la acción 'Me Gusta'
  const [liked, likeAction] = useActionState(toggleLike, false); 
  
  // 2. Segundo useActionState para la acción 'Seguir'
  const [following, followAction] = useActionState(toggleFollow, false); 

return (
    <div className="social-actions">
      {/* Formulario para la acción 'Me Gusta' */}
      <form action={likeAction}>
        <button className="like-button">
          {liked ? " ❤️ Me Gusta" : "♡ Me Gusta"}
        </button>
      </form>
      
      {/* Formulario para la acción 'Seguir' */}
      <form action={followAction}>
        <button className="follow-button">
          {following ? " ✔ Siguiendo" : "+ Seguir"}
        </button>
      </form>
    </div>
  );
}

export default SocialActions;