React'ning useActionState'ini o'zlashtirish: Zamonaviy shakllar va amallarni boshqarish bo'yicha yakuniy qo'llanma

Veb-ishlab chiqishning doimiy rivojlanib borayotgan landshaftida React foydalanuvchi interfeyslarini qanday yaratishimizni takomillashtiradigan kuchli vositalarni joriy etishda davom etmoqda. Yaqinda qo'shilgan, React 19 da o'z o'rnini mustahkamlagan eng muhim qo'shimchalardan biri bu `useActionState` hukidir. Ilgari eksperimental relizlarda `useFormState` nomi bilan tanilgan ushbu huk shakllarni boshqarish uchun oddiy vositadan ko'proq narsa; bu asinxron operatsiyalar bilan bog'liq holatni boshqarishda tub burilishdir.

Ushbu keng qamrovli qo'llanma sizni fundamental tushunchalardan ilg'or namunalargacha olib boradi, `useActionState` ning zamonaviy React ilovalarida ma'lumotlarni o'zgartirish, server bilan aloqa va foydalanuvchi fikr-mulohazalarini boshqarishda nima uchun o'yinni o'zgartiruvchi ekanligini ko'rsatadi. Oddiy aloqa shaklini yoki murakkab, ma'lumotlarga boy boshqaruv panelini yaratayotgan bo'lsangiz ham, ushbu hukni o'zlashtirish kodingizni sezilarli darajada soddalashtiradi va foydalanuvchi tajribasini yaxshilaydi.

Asosiy muammo: An'anaviy amal holatini boshqarishning murakkabligi

Yechimga kirishdan oldin, muammoni qadrlaylik. Yillar davomida oddiy shaklni yuborish yoki API chaqiruvi atrofidagi holatni boshqarish `useState` va `useEffect` yordamida bashorat qilinadigan, ammo noqulay naqshni o'z ichiga olgan. Dunyo bo'ylab dasturchilar ushbu takrorlanuvchi kodni son-sanoqsiz marta yozganlar.

Standart kirish shaklini ko'rib chiqaylik. Biz boshqarishimiz kerak:

• Shakl kiritish qiymatlari (elektron pochta, parol).
• Yuborish tugmasini o'chirish va fikr-mulohazalarni taqdim etish uchun yuklash yoki kutish holati.
• Serverdan xabarlarni ko'rsatish uchun xato holati (masalan, "Noto'g'ri hisob ma'lumotlari").
• Muvaffaqiyatli yuborishdan keyingi muvaffaqiyat holati yoki ma'lumotlar.

'Oldingi' misol: `useState` dan foydalanish

Odatdagi amalga oshirish quyidagicha ko'rinishi mumkin:

            
// A traditional approach without useActionState
import { useState } from 'react';

// A mock API function
async function loginUser(email, password) {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      if (email === 'user@example.com' && password === 'password123') {
        resolve({ success: true, message: 'Welcome back!' });
      } else {
        reject(new Error('Invalid email or password.'));
      }
    }, 1500);
  });
}

function TraditionalLoginForm() {
  const [email, setEmail] = useState('');
  const [password, setPassword] = useState('');
  const [error, setError] = useState(null);
  const [isLoading, setIsLoading] = useState(false);

  const handleSubmit = async (event) => {
    event.preventDefault();
    setIsLoading(true);
    setError(null);

    try {
      const result = await loginUser(email, password);
      // Handle successful login, e.g., redirect or show success message
      alert(result.message);
    } catch (err) {
      setError(err.message);
    } finally {
      setIsLoading(false);
    }
  };

  return (
    

      
Login (Traditional)
      {error && 
{error}
}
      

        Email:
         setEmail(e.target.value)} 
          required 
        />
      
      

        Password:
         setPassword(e.target.value)} 
          required 
        />
      
      
        {isLoading ? 'Logging in...' : 'Log In'}
      
    
  );
}

            

              
                Copy
              
            
          

Ushbu kod ishlaydi, ammo uning bir nechta kamchiliklari bor:

• Boilerplate: Amaliyotning hayot aylanishini boshqarish uchun bizga uchta alohida `useState` chaqiruvi (`error`, `isLoading` va har bir kiritish uchun) kerak.
• Qo'lda holatni boshqarish: Biz `isLoading` ni qo'lda true, so'ngra `finally` blokida false qilib o'rnatish, va yangi yuborish boshlanishida oldingi xatolarni tozalash uchun javobgarmiz. Bu xatolarga moyil.
• Birikish: Yuborish mantig'i komponentning hodisa ishlovchisi ichida qattiq bog'langan.

`useActionState` bilan tanishuv: Soddalikda paradigma siljishi

`useActionState` bu amalning holatini boshqarish uchun mo'ljallangan React hukidir. U kutish, tugatish va xato tsiklini oqlangan tarzda boshqaradi, bu esa boilerplate kodini kamaytiradi va toza, deklarativroq kodni targ'ib qiladi.

Hukning imzosini tushunish

Hukning sintaksisi oddiy va kuchli:

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

• `action`: Kerakli operatsiyani bajaradigan (masalan, API chaqiruvi, server amali) asinxron funksiya. U avvalgi holatni va har qanday amalga xos argumentlarni (masalan, shakl ma'lumotlari) qabul qiladi va yangi holatni qaytarishi kerak.
• `initialState`: Amal bajarilmaguncha `state` ning qiymati.
• `state`: Joriy holat. U dastlab `initialState` ni ushlab turadi, va amal bajarilgandan so'ng, u amal tomonidan qaytarilgan qiymatni ushlab turadi. Bu erda siz muvaffaqiyat xabarlari, xato tafsilotlari yoki tekshirish bo'yicha fikr-mulohazalarni saqlaysiz.
• `formAction`: Amalingizning yangi, o'ralgan versiyasi. Siz ushbu funksiyani `
  ` propiga yoki tugmaning `onClick` ga o'tkazasiz. React ushbu o'ralgan funksiya chaqirilganda asl amalingizni to'g'ri argumentlar bilan chaqirishni boshqaradi.

'Keyingi' misol: `useActionState` yordamida qayta tuzish

Keling, kirish shaklimizni qayta tuzamiz. Komponent qanchalik toza va aniqroq bo'lishini ko'ring.

            
import { useActionState } from 'react';
import { useFormStatus } from 'react-dom';

// The action function is now defined outside the component.
// It receives the previous state and the form data.
async function loginAction(previousState, formData) {
  const email = formData.get('email');
  const password = formData.get('password');

  // Simulate network delay
  await new Promise(resolve => setTimeout(resolve, 1500));

  if (email === 'user@example.com' && password === 'password123') {
    return { success: true, message: 'Login successful! Welcome.' };
  } else {
    return { success: false, message: 'Invalid email or password.' };
  }
}

// A separate component to show the pending state.
// This is a key pattern for separation of concerns.
function SubmitButton() {
  const { pending } = useFormStatus();

  return (
    
      {pending ? 'Logging in...' : 'Log In'}
    
  );
}

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

  return (
    
      
Login (with useActionState)
      {!state.success && state.message && (
        
{state.message}
      )}
      {state.success && (
        
{state.message}
      )}
      

        Email:
        
      
      

        Password:
        
      
      
    
  );
}

            

              
                Copy
              
            
          

Yaxshilanishlar darhol ko'zga tashlanadi:

• Qo'lda holatni boshqarish yo'q: Biz endi `isLoading` yoki `error` holatlarini o'zimiz boshqarmaymiz. React buni ichki qismda boshqaradi.
• Ajratilgan mantiq: `loginAction` funksiyasi endi alohida sinovdan o'tkazilishi mumkin bo'lgan sof, qayta ishlatiladigan funksiyadir.
• Deklarativ UI: Komponentning JSX'i huk tomonidan qaytarilgan `state` asosida UI ni deklarativ tarzda ko'rsatadi. Agar `state.message` mavjud bo'lsa, biz uni ko'rsatamiz.
• Soddalashtirilgan kutish holati: Biz `useFormStatus` ni joriy qildik, bu kutish rejimini (pending UI) boshqarishni juda oson qiladi.

`useActionState` ning asosiy xususiyatlari va afzalliklari

1. `useFormStatus` bilan uzluksiz kutish holatini boshqarish

Ushbu naqshning eng kuchli xususiyatlaridan biri uning `useFormStatus` huki bilan integratsiyasidir. `useFormStatus` asosiy `

            
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 };
  }

  // Simulate API call
  await new Promise(res => setTimeout(res, 1000));

  // On success
  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 (
    
      
Sign Up
      {state.message && (
        

          {state.message}
        
      )}
      

        Email:
        
        {state.errors?.email && 
{state.errors.email}
}
      
      

        Password:
        
        {state.errors?.password && 
{state.errors.password}
}
      
      
    
  );
}

            

              
                Copy
              
            
          

Ushbu naqsh murakkab shakllar uchun juda kuchli. Server (yoki mijoz tomonidagi tekshirish funksiyasi) tekshirish mantig'i uchun yagona haqiqat manbai bo'lib, komponent oddiygina `state` ob'ektida taqdim etilgan fikr-mulohazalarni ko'rsatadi.

3. Progressiv takomillashtirish va Server Amallari uchun mo'ljallangan

`useActionState` React'ning Server Amallari bo'yicha qarashining asosiy toshidir, ayniqsa Next.js kabi freymvorklar ichida. Server Amali bu serverda belgilagan, ammo mijoz komponentlaridan bevosita chaqirilishi mumkin bo'lgan funksiyadir.

Server Amali bilan `useActionState` dan foydalanganda, React progressiv takomillashtirishni yoqadi. Bu degani:

• Agar JavaScript yoqilgan bo'lsa, shaklni yuborish mijozda to'liq sahifani qayta yuklamasdan sodir bo'ladi, bu esa silliq, bir sahifali dastur (SPA) tajribasini ta'minlaydi.
• Agar JavaScript o'chirilgan yoki yuklanmagan bo'lsa, `
  ` brauzerning mahalliy HTML shaklini yuborish mexanizmidan foydalanib ishlayveradi.

Bu kirish imkoniyati va chidamlilik uchun katta yutuq bo'lib, ilovangiz har xil tarmoq sharoitlari va qurilma imkoniyatlariga ega global auditoriya uchun foydali bo'lishini ta'minlaydi.

            
// In a Next.js App Router file (e.g., app/actions.js)
'use server';

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

  // ... logic to save the post to a database ...
  
  if (title.length < 5) {
    return { message: 'Title is too short.' };
  }

  // In a real app, you would revalidate data here
  // revalidatePath('/posts');
  return { message: 'Post created!' };
}

// In your client component (e.g., app/page.js)
import { useActionState } from 'react';
import { createPost } from './actions';

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

  return (
    
      
      Create Post
      {state.message && 
{state.message}
}
    
  );
}

            

              
                Copy
              
            
          

Ilg'or naqshlar va foydalanish holatlari

Shakllardan tashqari: Har qanday asinxron amal uchun `useActionState` dan foydalanish

Despite its origins as `useFormState`, the hook is not limited to `

            
async function deleteItemAction(prevState, itemId) {
  // Simulate an API call to delete an item
  console.log(`Deleting item with ID: ${itemId}`);
  await new Promise(res => setTimeout(res, 1000));
  const isSuccess = Math.random() > 0.2; // Simulate potential failure

  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 (
    

      Item {id}
      
        {isPending ? 'Deleting...' : 'Delete'}
      
      {state.message && 
{state.message}
}
    
  );
}

            

              
                Copy
              
            
          

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

async function sendMessageAction(prevState, formData) {
  const sentMessage = formData.get('message');
  await new Promise(res => setTimeout(res, 2000)); // Simulate slow network
  // In a real app, this would be your API call
  // For this demo, we'll assume it always succeeds
  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(); // Reset form visually
    const result = await sendMessageAction(null, formData);
    // Update the final state
    setMessages(current => [...current, result]);
  };

  return (
    

      
Chat
      

        {optimisticMessages.map((msg, index) => (
          

            {msg.text} {msg.sending && (Sending...)}
          
        ))}
      
      
        
        Send
      
    
  );
}

            

              
                Copy
              
            
          

Ushbu murakkabroq misolda biz `useOptimistic` xabarni darhol "(Yuborilmoqda...)" yorlig'i bilan qanday qo'shganini ko'ramiz. Keyin `formAction` haqiqiy asinxron operatsiyani bajaradi. U tugagandan so'ng, yakuniy holat yangilanadi. Agar amal muvaffaqiyatsiz bo'lsa, React optimistik holatni avtomatik ravishda bekor qiladi va asl `messages` holatiga qaytadi.

`useActionState` va `useState`: Qaysi birini tanlash kerak

Ushbu yangi vosita bilan keng tarqalgan savol tug'iladi: qachon men hali ham `useState` dan foydalanishim kerak?

• `useState` dan foydalaning:
  • Faqat mijoz tomonida, sinxron UI holati uchun: Modalni yoqish, tab guruhidagi joriy yorliqni boshqarish yoki server amalini bevosita ishga tushirmaydigan boshqariladigan komponent kiritishlarini boshqarish haqida o'ylang.
  • Amalning bevosita natijasi bo'lmagan holat uchun: Masalan, mijoz tomonida qo'llaniladigan filtr sozlamalarini saqlash.
  • Oddiy holat o'zgaruvchilari: Hisoblagich, boolean bayrog'i, qator.
• `useActionState` dan foydalaning:
  • Shaklni yuborish yoki asinxron amal natijasida yangilanadigan holat uchun: Bu uning asosiy foydalanish holati.
  • Operatsiyaning kutish, muvaffaqiyat va xato holatlarini kuzatish kerak bo'lganda: U ushbu butun hayot aylanishini mukammal tarzda qamrab oladi.
  • React Server Amallari bilan integratsiya qilish uchun: Bu Server Amallari bilan ishlash uchun muhim mijoz tomonidagi huk.
  • Server tomonida tekshirish va fikr-mulohaza talab qiluvchi shakllar uchun: U serverning tuzilmaviy tekshirish xatolarini mijozga qaytarishi uchun toza kanalni ta'minlaydi.

Global eng yaxshi amaliyotlar va mulohazalar

Global auditoriya uchun qurayotganda, kodning funksionalligidan tashqari omillarni hisobga olish muhimdir.

Kirish imkoniyati (a11y)

Shakl xatolarini ko'rsatganda, ular yordamchi texnologiyalar foydalanuvchilari uchun qulay ekanligiga ishonch hosil qiling. O'zgarishlarni dinamik ravishda e'lon qilish uchun ARIA atributlaridan foydalaning.

            
// In your form component
const { errors } = state;

// ...


{errors?.email && (
  

    {errors.email}
  
)}

            

              
                Copy
              
            
          

`aria-invalid="true"` atributi ekran o'qish dasturlariga kiritishda xato borligini bildiradi. Xato xabaridagi `role="alert"` u paydo bo'lishi bilanoq foydalanuvchiga e'lon qilinishini ta'minlaydi.

Xalqaro an'analar (i18n)

Amallaringizdan qattiq kodlangan xato satrlarini qaytarishdan saqlaning, ayniqsa ko'p tilli dasturda. Buning o'rniga, mijozda tarjima qilingan satrlarga mos keladigan xato kodlari yoki kalitlarini qaytaring.

            
// Action on the server
async function internationalizedAction(prevState, formData) {
  // ...validation logic...
  if (password.length < 8) {
    return { success: false, error: { code: 'ERROR_PASSWORD_TOO_SHORT' } };
  }
  // ...
}

// Component on the client
import { useTranslation } from 'react-i18next';

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

  return (
    

      {/* ... inputs ... */}
      {state.error && (
        

          {t(state.error.code)} // Maps 'ERROR_PASSWORD_TOO_SHORT' to 'Password must be at least 8 characters long.'
        
      )}
      
    
  );
}

            

              
                Copy
              
            
          

TypeScript bilan tur xavfsizligi

`useActionState` bilan TypeScript'dan foydalanish a'lo darajadagi tur xavfsizligini ta'minlaydi, xatolarni ular paydo bo'lishidan oldin ushlaydi. Siz amalingizning holati va payloadi uchun turlarni belgilashingiz mumkin.

            
import { useActionState } from 'react';

// 1. Define the state shape
type FormState = {
  success: boolean;
  message: string | null;
  errors?: {
    email?: string;
    password?: string;
  } | null;
};

// 2. Define the action function's signature
type SignupAction = (prevState: FormState, formData: FormData) => Promise;

const signupAction: SignupAction = async (prevState, formData) => {
  // ... implementation ...
  // TypeScript will ensure you return a valid FormState object
  return { success: false, message: 'Invalid.', errors: { email: '...' } };
};

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

  // 3. The hook infers the types correctly
  const [state, formAction] = useActionState(signupAction, initialState);

  // Now, `state` is fully typed. `state.errors.email` will be type-checked.
  return (
    

      {/* ... */}
    
  );
}

            

              
                Copy
              
            
          

Xulosa: React'da holatni boshqarishning kelajagi

`useActionState` huki oddiy qulaylikdan ko'proq narsa; u React'ning rivojlanayotgan falsafasining asosiy qismini ifodalaydi. U dasturchilarni tashvishlarni aniqroq ajratishga, progressiv takomillashtirish orqali yanada chidamli ilovalarga va foydalanuvchi amallari natijalarini boshqarishning deklarativroq usuliga undaydi.

Amalning mantig'ini va uning natijaviy holatini markazlashtirish orqali `useActionState` mijoz tomonidagi boilerplate va murakkablikning muhim manbasini yo'q qiladi. U kutish holatlari uchun `useFormStatus` va takomillashtirilgan foydalanuvchi tajribalari uchun `useOptimistic` bilan uzluksiz integratsiyalanadi, bu esa zamonaviy ma'lumotlarni o'zgartirish naqshlari uchun kuchli uchlikni tashkil etadi.

Yangi xususiyatlarni yaratayotganda yoki mavjudlarini qayta tuzayotganda, asinxron operatsiya natijasida to'g'ridan-to'g'ri holatni boshqarayotganingizda `useActionState` ga murojaat qilishni o'ylab ko'ring. Bu toza, mustahkamroq va React'ning kelajak yo'nalishi bilan mukammal mos keladigan kodga olib keladi.