React 19 Actions را معرفی می کند که توابع ناهمزمان هستند. اقدامات در تسهیل ارسال فرم مفید است. این آموزش به چیستی Actions و نحوه استفاده از آنها می پردازد.

شما در مورد:

ویژگی جدید React 19، Actions

هوک های جدید React 19، useActionState و useFormStatus

نحوه تبدیل فرم React 18 به فرم React 19

ویژگی: اقدامات واکنش

برای درک Actions، اجازه دهید ابتدا نگاهی به نحوه مدیریت فرم‌های امروزی بیندازیم. در React 18 و قبل از آن، ما فرم ها را با استفاده از تابع handleSubmit در یک دکمه ارسال می کنیم. در اینجا یک فرم ساده است که یک name فیلد ورودی دارد:

 // Form submission in React 18 console.info('React 18 form'); const [name, setName] = useState(''); const [isPending, setIsPending] = useState(false); const handleChange = (event) => { setName(event.target.value); }; const handleSubmit = (event) => { event.preventDefault(); setIsPending(true); setTimeout(() => { // call API setIsPending(false); }, 500); }; return ( <form> <input type="text" name="name" onChange={handleChange} /> {isPending ? <p>Loading...</p> : <p>Hello in React 18, {name}</p>} <button onClick={handleSubmit} disabled={isPending}> Update </button> </form> );

در این کد ما کارهای زیر را انجام می دهیم:

گفت ن حالت بارگذاری: از متغیر isPending برای پیگیری دستی وضعیت بارگیری استفاده می کنیم.

ارسال فرم: فرم با استفاده از کنترل کننده رویداد handleSubmit متصل به رویداد onClick دکمه ارسال می شود.

گرفتن مقدار ارسالی: تابع handleChange مقدار ارسال شده را گرفته و در متغیرهای حالت ذخیره می کند.

React Actions چیست؟

با React 19، مدیریت فرم ها با Actions، الهام گرفته از چارچوب هایی مانند Remix، آسان تر می شود. یکی از ویژگی های کلیدی استفاده پیشرفته از startTransition برای مدیریت حالت های معلق است.

startTransition در React 18 معرفی شد و به توسعه‌دهندگان این امکان را می‌دهد تا برخی به‌روزرسانی‌ها را به‌عنوان کمتر فوری علامت‌گذاری کنند.

در React 19، startTransition اکنون می‌تواند توابع ناهمگام را مدیریت کند، و آن را برای مدیریت کارهای ناهمزمان و بهبود تجربه کاربر در طول ارسال فرم‌ها قدرتمندتر می‌کند.

 const [isPending, startTransition] = useTransition(); const handleSubmit = () => { startTransition(async () => { const error = await updateName(name); if (error) { setError(error); return; } redirect('/path'); }); };

این تابع همگام در startTransition یک Action نامیده می شود. چیزی که اکشن ها را جالب می کند این است که می توان از آنها به طور مستقیم برای ارسال فرم هایی مانند موارد زیر استفاده کرد:

 <form action="{actionFn}">...</form>

اگر با PHP تجربه داشته باشید، ممکن است این فرمت آشنا به نظر برسد.

نحوه ایجاد یک React Action

برای ایجاد یک تابع async، می توانیم از یک هوک جدید معرفی شده در React 19 به نام useActionState استفاده کنیم. این قلاب و پاس را در یک تابع عمل و یک حالت اولیه می نامیم. این قلاب حالت به روز شده و یک فرم اکشن actionFn برمی گرداند که می تواند برای سیم کشی یک فرم استفاده شود.

 const [state, actionFn] = useActionState(submitAction, { name: '' });

اکنون با سیم‌کشی این فرم، موارد زیر را داریم:

 <form action={actionFn}> <input type="text" name="name" /> <button type="submit" disabled="{pending}"> Update </button> </form>

برای اضافه کردن حالت بارگذاری، می‌توانیم از یک هوک جدید معرفی شده در React 19 به نام useFormStatus استفاده کنیم.

 const { pending, data, method, action } = useFormStatus();

این قلاب اطلاعاتی در مورد وضعیت فرم ارائه می دهد. حالت pending نشان می دهد که آیا فرم در حال ارسال است یا خیر، و data یک شی FormData حاوی داده های ارسالی است. ما از این حالت در انتظار برای نمایش یک لودر استفاده می کنیم.

اما یک اخطار وجود دارد: این قلاب فقط در یک جزء کودک قابل استفاده است، نه در خود فرم. پس ، ما باید اجزای فرزند SubmitButton و Loader را برای بازیابی وضعیت pending ایجاد کنیم:

 function Loader() { const { pending } = useFormStatus(); return <div>{pending && "Loading..."}</div>; } function SubmitButton() { const { pending } = useFormStatus(); return ( <button type="submit" disabled={pending}> Update </button> ); } .... return( <form action={formAction}> <input type="text" name="name" /> <Loader /> <SubmitButton /> </form> )

همچنین می‌توانیم اطلاعات مفیدی در مورد داده‌های ارسال‌شده به فرم با بازیابی آن از حالت بازگشت‌شده از useActionState دریافت کنیم.

 const [state, formAction] = useActionState(submitAction, { name: '' });

پس فرم نهایی این است:

 function Loader() { const { pending } = useFormStatus(); return <div>{pending && 'Loading...'}</div>; } function SubmitButton() { const { pending } = useFormStatus(); return ( <button type="submit" disabled={pending}> Update </button> ); } function Name({ name }) { return <p>Hello in 19 {name}</p>; } function App() { console.info('React 19 form'); const [state, formAction] = useActionState(submitAction, { name: '' }); return ( <form action={formAction}> <input type="text" name="name" /> <Loader /> <SubmitButton /> <Name name={state?.name} /> </form> ); }

این را با فرم React 18 در بالای این پست مقایسه کنید تا تفاوت را تحلیل کنید.

نتیجه

با استفاده از کنش‌هایی همراه با قلاب‌هایی مانند useActionState و useFormStatus ، می‌توانیم به راحتی وضعیت‌های فرم را مدیریت کنیم، داده‌های ارسال‌شده را ضبط کنیم و بازخورد پاسخگو را در طول ارسال فرم به کاربران ارائه کنیم تا حالت‌های در حال تعلیق را نشان دهیم.

من برای این تجربه بهبودیافته از مدیریت فرم‌ها در React 19 هیجان‌زده هستم و مشتاقانه منتظر حذف handleSubmits غیرضروری، useState و حالت‌های pending هستم.

در مقاله بعدی خود، یکی دیگر از ویژگی های جدید و هیجان انگیز React را مورد بحث قرار خواهم داد: React Compiler. این ابزار به طور خودکار یادداشت می شود و نیازی به useMemo و useCallback را از بین می برد. به روز باشید و با پیوستن به خبرنامه من، مقاله را مستقیماً در صندوق ورودی خود دریافت کنید.

خبرکاو