React useActionState: Zamonaviy Formalarni Boshqarish Bo'yicha To'liq Qo'llanma

Veb-dasturlash dunyosi doimiy rivojlanishda va React ekotizimi bu o'zgarishlarning oldingi saflarida turibdi. So'nggi versiyalar bilan React interaktiv va barqaror ilovalarni yaratish usullarimizni tubdan yaxshilaydigan kuchli xususiyatlarni taqdim etdi. Bularning eng ta'sirlisi – formalar va asinxron operatsiyalarni boshqarishda inqilobiy o'zgarish yasagan useActionState hook'idir. Ilgari eksperimental relizlarda useFormState nomi bilan tanilgan ushbu hook endi har qanday zamonaviy React dasturchisi uchun barqaror va muhim vositaga aylandi.

Ushbu to'liq qo'llanma sizni useActionState bilan chuqur tanishtiradi. Biz u hal qiladigan muammolarni, uning asosiy mexanikasini va useFormStatus kabi qo'shimcha hook'lar bilan birgalikda undan foydalanib, yuqori darajadagi foydalanuvchi tajribasini yaratishni o'rganamiz. Oddiy aloqa formasini yoki murakkab, ma'lumotlarga boy ilovani yaratayotgan bo'lsangiz ham, useActionState'ni tushunish kodingizni toza, deklarativ va mustahkamroq qiladi.

Muammo: An'anaviy Formalar Holatini Boshqarishning Murakkabligi

useActionState'ning nafisligini qadrlashdan oldin, avvalo u yechadigan qiyinchiliklarni tushunishimiz kerak. Yillar davomida React'da forma holatini boshqarish useState hook'idan foydalanishni o'z ichiga olgan, bu kutilgan, lekin ko'pincha noqulay naqsh edi.

Keling, keng tarqalgan stsenariyni ko'rib chiqaylik: ro'yxatga yangi mahsulot qo'shish uchun oddiy forma. Biz bir nechta holat qismlarini boshqarishimiz kerak:

Mahsulot nomi uchun kiritish qiymati.
API so'rovi paytida foydalanuvchiga fikr-mulohaza berish uchun yuklanish yoki kutish holati.
Agar yuborish muvaffaqiyatsiz bo'lsa, xabarlarni ko'rsatish uchun xatolik holati.
Yakunlangandan so'ng muvaffaqiyat holati yoki xabari.

Odatdagi amalga oshirish quyidagicha ko'rinishi mumkin:

Misol: bir nechta useState hook'lari bilan 'Eski Usul'

// Xayoliy API funksiyasi
const addProductAPI = async (productName) => {
await new Promise(resolve => setTimeout(resolve, 1500));
if (!productName || productName.length < 3) {
throw new Error('Mahsulot nomi kamida 3 belgidan iborat bo\'lishi kerak.');
}
console.log(`Mahsulot "${productName}" qo'shildi.`);
return { success: true };
};

// Komponent
import { useState } from 'react';

function OldProductForm() {
const [productName, setProductName] = useState('');
const [error, setError] = useState(null);
const [isPending, setIsPending] = useState(false);

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

try {
await addProductAPI(productName);
setProductName(''); // Muvaffaqiyatli bo'lganda kiritish maydonini tozalash
} catch (err) {
setError(err.message);
} finally {
setIsPending(false);
}
};

return (

Mahsulot Nomi:

      

        id="productName"

        name="productName"

        value={productName}

        onChange={(e) => setProductName(e.target.value)}

      />

      

      {error && {error}
}

    

  );

}


Bu yondashuv ishlaydi, ammo uning bir nechta kamchiliklari bor:

  Shablon kod: Biz kontseptual jihatdan yagona forma yuborish jarayoni bo'lgan narsani boshqarish uchun uchta alohida useState chaqiruviga muhtojmiz.
  Holatni qo'lda boshqarish: Dasturchi try...catch...finally bloki ichida yuklanish va xatolik holatlarini to'g'ri tartibda qo'lda o'rnatish va tiklash uchun javobgardir. Bu takrorlanuvchan va xatolarga moyil.
  Bog'liqlik: Forma yuborish natijasini qayta ishlash mantig'i komponentning renderlash mantig'i bilan chambarchas bog'langan.


useActionState'ni tanishtirish: Paradigma o'zgarishi

useActionState - bu asinxron harakatning holatini, masalan, forma yuborishni boshqarish uchun maxsus ishlab chiqilgan React hook'i. U holatni to'g'ridan-to'g'ri amal funksiyasining natijasiga bog'lash orqali butun jarayonni soddalashtiradi.

Uning imzosi aniq va ixcham:
const [state, formAction] = useActionState(actionFn, initialState);

Keling, uning tarkibiy qismlarini ko'rib chiqamiz:

  actionFn(previousState, formData): Bu ishni bajaradigan (masalan, API'ni chaqiradigan) sizning asinxron funksiyangiz. U oldingi holatni va forma ma'lumotlarini argument sifatida qabul qiladi. Eng muhimi, bu funksiya qaytaradigan narsa yangi holat bo'ladi.
  initialState: Bu amal birinchi marta bajarilishidan oldingi holatning qiymati.
  state: Bu joriy holat. U dastlab initialState'ni saqlaydi va har bir bajarilishdan so'ng sizning actionFn qaytaradigan qiymatga yangilanadi.
  formAction: Bu sizning amal funksiyangizning yangi, o'ralgan versiyasi. Siz bu funksiyani <form> elementining action prop'iga o'tkazishingiz kerak. React bu o'ralgan funksiyadan amalning kutish holatini kuzatish uchun foydalanadi.


useActionState bilan Refaktoring: Amaliy Misol

Endi, keling, mahsulot formamizni useActionState yordamida qayta ishlaymiz. Yaxshilanish darhol seziladi.

Birinchidan, biz amal mantig'imizni moslashtirishimiz kerak. Xatoliklarni tashlash o'rniga, amal natijani tavsiflovchi holat obyektini qaytarishi kerak.

Misol: useActionState bilan 'Yangi Usul'

// useActionState bilan ishlash uchun mo'ljallangan amal funksiyasi

const addProductAction = async (previousState, formData) => {

  const productName = formData.get('productName');

  await new Promise(resolve => setTimeout(resolve, 1500)); // Tarmoq kechikishini simulyatsiya qilish



  if (!productName || productName.length < 3) {

    return { message: 'Mahsulot nomi kamida 3 belgidan iborat bo\'lishi kerak.', success: false };

  }



  console.log(`Mahsulot "${productName}" qo'shildi.`);

  // Muvaffaqiyatli bo'lganda, muvaffaqiyat xabarini qaytaring va formani tozalang.

  return { message: `"${productName}" muvaffaqiyatli qo'shildi`, success: true };

};


// Qayta ishlangan komponent

import { useActionState } from 'react';

// Eslatma: Kutish holatini boshqarish uchun keyingi bo'limda useFormStatus'ni qo'shamiz.



function NewProductForm() {

  const initialState = { message: null, success: false };

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



  return (

    


      Mahsulot Nomi:

      

      

      {!state.success && state.message && (

        {state.message}

      )}

      {state.success && state.message && (

        {state.message}

      )}

    

  );

}


Buning qanchalik toza ekanligiga qarang! Biz uchta useState hook'ini bitta useActionState hook'i bilan almashtirdik. Komponentning vazifasi endi faqat `state` ob'ektiga asoslangan holda UI'ni render qilishdir. Barcha biznes mantiq `addProductAction` funksiyasi ichida toza tarzda jamlangan. Holat, amal qaytargan narsaga qarab avtomatik ravishda yangilanadi.

Lekin kuting, kutish holati-chi? Forma yuborilayotganda tugmani qanday qilib o'chirib qo'yamiz?

useFormStatus bilan Kutish Holatlarini Boshqarish

React aynan shu muammoni hal qilish uchun mo'ljallangan useFormStatus nomli yordamchi hook'ni taqdim etadi. U oxirgi forma yuborish uchun holat ma'lumotini beradi, lekin muhim bir qoida bilan: u holatini kuzatmoqchi bo'lgan <form> ichida render qilingan komponentdan chaqirilishi kerak.

Bu vazifalarni toza ajratishni rag'batlantiradi. Siz yuborish tugmasi kabi formaning yuborish holatidan xabardor bo'lishi kerak bo'lgan UI elementlari uchun maxsus komponent yaratasiz.

useFormStatus hook'i bir nechta xususiyatlarga ega ob'ektni qaytaradi, ulardan eng muhimi `pending`.
const { pending, data, method, action } = useFormStatus();

  pending: Ota-ona forma hozirda yuborilayotgan bo'lsa `true`, aks holda `false` bo'lgan mantiqiy qiymat.
  data: Yuborilayotgan ma'lumotlarni o'z ichiga olgan `FormData` ob'ekti.
  method: HTTP usulini ko'rsatuvchi satr (`'get'` yoki `'post'`).
  action: Formaning `action` prop'iga o'tkazilgan funksiyaga havola.


Holatdan Xabardor Yuborish Tugmasini Yaratish

Keling, maxsus `SubmitButton` komponentini yaratamiz va uni formamizga integratsiya qilamiz.

Misol: SubmitButton komponenti
import { useFormStatus } from 'react-dom';

// Eslatma: useFormStatus 'react'dan emas, 'react-dom'dan import qilinadi.



function SubmitButton() {

  const { pending } = useFormStatus();



  return (

    

  );

}


Endi, asosiy forma komponentimizni uni ishlatish uchun yangilashimiz mumkin.

Misol: useActionState va useFormStatus bilan to'liq forma
import { useActionState } from 'react';

import { useFormStatus } from 'react-dom';



// ... (addProductAction funksiyasi o'zgarishsiz qoladi)



function SubmitButton() { /* ... yuqorida aniqlanganidek ... */ }



function CompleteProductForm() {

  const initialState = { message: null, success: false };

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



  return (

    


      Mahsulot Nomi:

      {/* Muvaffaqiyatli bo'lganda input'ni qayta o'rnatish uchun key qo'shishimiz mumkin */}

      

      

      {!state.success && state.message && (

        {state.message}

      )}

      {state.success && state.message && (

        {state.message}

      )}

    

  );

}


Ushbu tuzilma bilan `CompleteProductForm` komponenti kutish holati haqida hech narsa bilishi shart emas. `SubmitButton` to'liq o'z-o'zini ta'minlaydi. Ushbu kompozitsion naqsh murakkab, qo'llab-quvvatlanadigan UI'larni yaratish uchun juda kuchli.

Progressiv Yaxshilanish Kuchi

Ushbu yangi amallarga asoslangan yondashuvning, ayniqsa Server Actions bilan ishlatilganda, eng chuqur afzalliklaridan biri bu avtomatik progressiv yaxshilanishdir. Bu tarmoq sharoitlari ishonchsiz bo'lishi mumkin bo'lgan va foydalanuvchilar eski qurilmalarga yoki o'chirilgan JavaScript'ga ega bo'lishi mumkin bo'lgan global auditoriya uchun ilovalar yaratishda muhim tushunchadir.

U qanday ishlaydi:

  JavaScript'siz: Agar foydalanuvchi brauzeri mijoz tomonidagi JavaScript'ni bajarmasa, `<form action={...}>` standart HTML formasi sifatida ishlaydi. U serverga to'liq sahifali so'rov yuboradi. Agar siz Next.js kabi freymvorkdan foydalanayotgan bo'lsangiz, server tomonidagi amal ishga tushadi va freymvork butun sahifani yangi holat bilan qayta render qiladi (masalan, tekshiruv xatosini ko'rsatib). Ilova to'liq ishlaydi, faqat SPA-ga o'xshash silliqliksiz.
  JavaScript bilan: JavaScript to'plami yuklanib, React sahifani gidratatsiya qilgandan so'ng, o'sha `formAction` mijoz tomonida bajariladi. To'liq sahifani qayta yuklash o'rniga, u odatdagi fetch so'rovi kabi ishlaydi. Amal chaqiriladi, holat yangilanadi va faqat komponentning kerakli qismlari qayta render qilinadi.


Bu shuni anglatadiki, siz forma mantig'ingizni bir marta yozasiz va u har ikki stsenariyda ham muammosiz ishlaydi. Siz sukut bo'yicha barqaror, kirish mumkin bo'lgan dastur yaratasiz, bu butun dunyo bo'ylab foydalanuvchi tajribasi uchun katta yutuqdir.

Ilg'or Naqshlar va Foydalanish Holatlari

1. Server Actions va Client Actions
Siz useActionState'ga o'tkazadigan `actionFn` standart mijoz tomonidagi asinxron funksiya (bizning misollarimizdagi kabi) yoki Server Action bo'lishi mumkin. Server Action - bu serverda aniqlangan funksiya bo'lib, uni to'g'ridan-to'g'ri mijoz komponentlaridan chaqirish mumkin. Next.js kabi freymvorklarda siz uni funksiya tanasining yuqori qismiga "use server"; direktivasini qo'shish orqali aniqlaysiz.


  Client Actions: Faqat mijoz tomonidagi holatga ta'sir qiladigan yoki uchinchi tomon API'larini to'g'ridan-to'g'ri mijozdan chaqiradigan o'zgartirishlar uchun ideal.
  Server Actions: Ma'lumotlar bazasi yoki boshqa server tomonidagi resurslarni o'z ichiga olgan o'zgartirishlar uchun mukammal. Ular har bir o'zgartirish uchun API nuqtalarini qo'lda yaratish zaruratini yo'qotib, arxitekturangizni soddalashtiradi.


Eng yaxshi tomoni shundaki, useActionState ikkalasi bilan ham bir xil ishlaydi. Siz mijoz amalini server amaliga almashtirishingiz mumkin, komponent kodini o'zgartirmasdan.

2. `useOptimistic` bilan Optimistik Yangilanishlar
Yanada sezgirroq tuyg'u uchun siz useActionState'ni useOptimistic hook'i bilan birlashtirishingiz mumkin. Optimistik yangilanish - bu asinxron amal muvaffaqiyatli bo'ladi deb *taxmin qilib*, UI'ni darhol yangilashdir. Agar u muvaffaqiyatsiz bo'lsa, siz UI'ni avvalgi holatiga qaytarasiz.

Ijtimoiy media ilovasini tasavvur qiling, unda siz izoh qo'shasiz. Optimistik tarzda, siz so'rov serverga yuborilayotganda yangi izohni ro'yxatda darhol ko'rsatasiz. useOptimistic bu naqshni amalga oshirishni osonlashtirish uchun amallar bilan birgalikda ishlashga mo'ljallangan.

3. Muvaffaqiyatli bo'lganda Formani Qayta O'rnatish
Muvaffaqiyatli yuborishdan so'ng forma kiritish maydonlarini tozalash keng tarqalgan talabdir. Bunga useActionState yordamida erishishning bir necha yo'li mavjud.


  Key Prop Hiylasi: Bizning `CompleteProductForm` misolimizda ko'rsatilganidek, siz input'ga yoki butun formaga noyob `key` tayinlashingiz mumkin. Kalit o'zgarganda, React eski komponentni o'chirib, yangisini o'rnatadi, bu esa uning holatini samarali tarzda qayta o'rnatadi. Kalitni muvaffaqiyat bayrog'iga bog'lash (`key={state.success ? 'success' : 'initial'}`) oddiy va samarali usuldir.
  Boshqariladigan Komponentlar: Agar kerak bo'lsa, siz hali ham boshqariladigan komponentlardan foydalanishingiz mumkin. Input qiymatini useState bilan boshqarib, siz useActionState'dan keladigan muvaffaqiyat holatini tinglaydigan useEffect ichida uni tozalash uchun setter funksiyasini chaqirishingiz mumkin.


Umumiy Xatolar va Eng Yaxshi Amaliyotlar


  useFormStatus'ning Joylashuvi: Unutmang, useFormStatus'ni chaqiradigan komponent `<form>` ning ichki elementi sifatida render qilinishi kerak. Agar u uning yonida yoki ota-onasi bo'lsa, u ishlamaydi.
  Serializatsiya Qilinadigan Holat: Server Actions'dan foydalanganda, amalingizdan qaytarilgan holat ob'ekti serializatsiya qilinadigan bo'lishi kerak. Bu shuni anglatadiki, u funksiyalar, Symbol'lar yoki boshqa serializatsiya qilinmaydigan qiymatlarni o'z ichiga olmasligi kerak. Oddiy ob'ektlar, massivlar, satrlar, raqamlar va mantiqiy qiymatlardan foydalaning.
  Amallarda Xatolik Tashlamang: `throw new Error()` o'rniga, sizning amal funksiyangiz xatolarni chiroyli tarzda boshqarishi va xatoni tavsiflovchi holat ob'ektini qaytarishi kerak (masalan, `{ success: false, message: 'Xatolik yuz berdi' }`). Bu holatning doimo bashorat qilinadigan tarzda yangilanishini ta'minlaydi.
  Aniq Holat Shaklini Belgilang: Boshidanoq holat ob'ektingiz uchun izchil tuzilmani o'rnating. `{ data: T | null, message: string | null, success: boolean, errors: Record | null }` kabi shakl ko'plab foydalanish holatlarini qamrab olishi mumkin.


useActionState va useReducer: Tezkor Taqqoslash

Bir qarashda, useActionState useReducer'ga o'xshab ko'rinishi mumkin, chunki ikkalasi ham oldingi holatga asoslangan holda holatni yangilashni o'z ichiga oladi. Biroq, ular alohida maqsadlarga xizmat qiladi.


  useReducer - mijoz tomonida murakkab holat o'tishlarini boshqarish uchun umumiy maqsadli hook. U amallarni dispetcherlash orqali ishga tushiriladi va ko'plab mumkin bo'lgan, sinxron holat o'zgarishlariga ega bo'lgan holat mantig'i uchun idealdir (masalan, murakkab ko'p bosqichli sehrgar).
  useActionState - bitta, odatda asinxron amalga javoban o'zgaradigan holat uchun mo'ljallangan ixtisoslashtirilgan hook. Uning asosiy vazifasi HTML formalar, Server Actions va React'ning kutish holati o'tishlari kabi bir vaqtda renderlash xususiyatlari bilan integratsiya qilishdir.


Xulosa: Formalarni yuborish va formalarga bog'liq asinxron operatsiyalar uchun useActionState zamonaviy, maqsadli vositadir. Boshqa murakkab, mijoz tomonidagi holat mashinalari uchun useReducer ajoyib tanlov bo'lib qoladi.

Xulosa: React Formalarining Kelajagini Qabul Qilish

useActionState hook'i shunchaki yangi API emas; u React'da formalar va ma'lumotlar o'zgarishlarini boshqarishning yanada mustahkam, deklarativ va foydalanuvchiga yo'naltirilgan usuliga o'tishni anglatadi. Uni qabul qilish orqali siz quyidagilarga erishasiz:


  Kamaytirilgan Shablon Kod: Bitta hook bir nechta useState chaqiruvlarini va holatni qo'lda boshqarishni almashtiradi.
  Integratsiyalashgan Kutish Holatlari: Yordamchi useFormStatus hook'i bilan yuklanish UI'larini muammosiz boshqaring.
  O'rnatilgan Progressiv Yaxshilanish: Barcha foydalanuvchilar uchun kirish imkoniyati va barqarorlikni ta'minlaydigan, JavaScript bilan yoki usiz ishlaydigan kod yozing.
  Soddalashtirilgan Server Aloqasi: Server Actions uchun tabiiy moslik, bu to'liq stek dasturlash tajribasini soddalashtiradi.


Yangi loyihalarni boshlayotganda yoki mavjudlarini qayta ishlayotganda, useActionState'dan foydalanishni o'ylab ko'ring. Bu nafaqat kodingizni toza va bashorat qilinadigan qilib, dasturchi tajribangizni yaxshilaydi, balki sizga tezroq, barqarorroq va turli global auditoriya uchun ochiq bo'lgan yuqori sifatli ilovalarni yaratish imkonini beradi.