Reacti `useActionState` kasutamise meistriklass: Lõplik juhend kaasaegsete vormide ja toimingute käsitlemiseks

            
async function advancedSignupAction(prevState, formData) {
  const email = formData.get('email');
  const password = formData.get('password');
  const errors = {};

  if (!email || !email.includes('@')) {
    errors.email = 'Please enter a valid email address.';
  }

  if (!password || password.length < 8) {
    errors.password = 'Password must be at least 8 characters long.';
  }

  if (Object.keys(errors).length > 0) {
    return { success: false, message: 'Please correct the errors below.', errors };
  }

  // Simuleeri API kõnet
  await new Promise(res => setTimeout(res, 1000));

  // Edu korral
  return { success: true, message: 'Account created successfully!', errors: null };
}

function SignupForm() {
  const initialState = { success: false, message: null, errors: null };
  const [state, formAction] = useActionState(advancedSignupAction, initialState);

  return (
    <form action={formAction}>
      
Sign Up
      {state.message && (
        <p style={{ color: state.success ? 'green' : 'red' }}>
          {state.message}
        </p>
      )}
      

        <label htmlFor="signup-email">Email:</label>
        <input id="signup-email" name="email" type="email" />
        {state.errors?.email && <p style={{ color: 'red' }}>{state.errors.email}</p>}
      
      

        <label htmlFor="signup-password">Password:</label>
        <input id="signup-password" name="password" type="password" />
        {state.errors?.password && <p style={{ color: 'red' }}>{state.errors.password}</p>}
      
      <SubmitButton />
    </form>
  );
}

            

              
                Copy
              
            
          

            
// Next.js App Router failis (nt app/actions.js)
'use server';

export async function createPost(prevState, formData) {
  const title = formData.get('title');

  // ... loogika postituse salvestamiseks andmebaasi ...
  
  if (title.length < 5) {
    return { message: 'Title is too short.' };
  }

  // Tõelises rakenduses valideeriksite siin andmeid
  // revalidatePath('/posts');
  return { message: 'Post created!' };
}

// Teie kliendikomponendis (nt app/page.js)
import { useActionState } from 'react';
import { createPost } from './actions';

function NewPostForm() {
  const [state, formAction] = useActionState(createPost, { message: null });

  return (
    <form action={formAction}>
      <input type="text" name="title" />
      <button type="submit">Create Post</button>
      {state.message && <p>{state.message}</p>}
    </form>
  );
}

            

              
                Copy
              
            
          

            
async function deleteItemAction(prevState, itemId) {
  // Simuleeri API kõnet üksuse kustutamiseks
  console.log(`Deleting item with ID: ${itemId}`);
  await new Promise(res => setTimeout(res, 1000));
  const isSuccess = Math.random() > 0.2; // Simuleeri potentsiaalset tõrget

  if (isSuccess) {
    return { success: true, message: `Item ${itemId} deleted.` };
  } else {
    return { success: false, message: 'Failed to delete item. Please try again.' };
  }
}

function DeletableItem({ id }) {
  const [state, deleteAction] = useActionState(deleteItemAction, { message: null });
  const [isPending, startTransition] = useTransition();

  const handleClick = () => {
    startTransition(() => {
      deleteAction(id);
    });
  };

  return (
    <div>
      <span>Item {id}</span>
      <button onClick={handleClick} disabled={isPending}>
        {isPending ? 'Deleting...' : 'Delete'}
      </button>
      {state.message && <p>{state.message}</p>}
    </div>
  );
}

            

              
                Copy
              
            
          

            
import { useActionState, useOptimistic, useRef } from 'react';

async function sendMessageAction(prevState, formData) {
  const sentMessage = formData.get('message');
  await new Promise(res => setTimeout(res, 2000)); // Simuleeri aeglast võrku
  // Tõelises rakenduses oleks see teie API kõne
  // Selle demo jaoks eeldame, et see õnnestub alati
  return { text: sentMessage, sending: false };
}

function MessageList() {
  const formRef = useRef();
  const [messages, setMessages] = useState([{ text: 'Hello!', sending: false }]);
  const [optimisticMessages, addOptimisticMessage] = useOptimistic(
    messages,
    (currentMessages, newMessageText) => [
      ...currentMessages,
      { text: newMessageText, sending: true }
    ]
  );

  const formAction = async (formData) => {
    const newMessageText = formData.get('message');
    addOptimisticMessage(newMessageText);
    formRef.current.reset(); // Vormi visuaalne lähtestamine
    const result = await sendMessageAction(null, formData);
    // Lõpliku oleku värskendamine
    setMessages(current => [...current, result]);
  };

  return (
    <div>
      <h2>Chat</h2>
      <ul>
        {optimisticMessages.map((msg, index) => (
          <li key={index} >
            {msg.text} {msg.sending && <em>(Sending...)</em>}
          </li>
        ))}
      </ul>
      <form action={formAction} ref={formRef}>
        <input type="text" name="message" placeholder="Your message" />
        <button type="submit">Send</button>
      </form>
    </div>
  );
}

            

              
                Copy
              
            
          

            
// Teie vormikomponendis
const { errors } = state;

// ...

<input 
  name="email"
  type="email"
  aria-invalid={!!errors?.email}
  aria-describedby="email-error"
/>
{errors?.email && (
  <p id="email-error" role="alert" style={{ color: 'red' }}>
    {errors.email}
  </p>
)}

            

              
                Copy
              
            
          

            
// Toiming serveris
async function internationalizedAction(prevState, formData) {
  // ...valideerimisloogika...
  if (password.length < 8) {
    return { success: false, error: { code: 'ERROR_PASSWORD_TOO_SHORT' } };
  }
  // ...
}

// Komponent kliendil
import { useTranslation } from 'react-i18next';

function I18nForm() {
  const { t } = useTranslation();
  const [state, formAction] = useActionState(internationalizedAction, {});

  return (
    <form action={formAction}>
      {/* ... sisendid ... */}
      {state.error && (
        <p role="alert" style={{ color: 'red' }}>
          {t(state.error.code)} // Kaardistab 'ERROR_PASSWORD_TOO_SHORT' funktsioonile 'Password must be at least 8 characters long.'
        </p>
      )}
      <SubmitButton />
    </form>
  );
}

            

              
                Copy
              
            
          

            
import { useActionState } from 'react';

// 1. Määrake oleku kuju
type FormState = {
  success: boolean;
  message: string | null;
  errors?: {
    email?: string;
    password?: string;
  } | null;
};

// 2. Määrake toimingu funktsiooni signatuur
type SignupAction = (prevState: FormState, formData: FormData) => Promise<FormState>;

const signupAction: SignupAction = async (prevState, formData) => {
  // ... rakendamine ...
  // TypeScript tagab, et tagastate kehtiva FormState objekti
  return { success: false, message: 'Invalid.', errors: { email: '...' } };
};

function TypedSignupForm() {
  const initialState: FormState = { success: false, message: null, errors: null };

  // 3. Hook tuvastab tüübid õigesti
  const [state, formAction] = useActionState(signupAction, initialState);

  // Nüüd on `state` täielikult tüübitud. `state.errors.email` kontrollitakse tüübi järgi.
  return (
    <form action={formAction}>
      {/* ... */}
    </form>
  );
}

            

              
                Copy