سلام توسعه دهندگان 👋،
این منم دوست شما دکتر تقی امام و امروز قصد دارم یک هوک جدید و هیجان انگیز در React به نام useActionState.
من را در Github دنبال کنید⭐
useActionState چیست؟
useActionState یک قلاب React جدید است که به ما کمک می‌کند وضعیت را بر اساس نتیجه یک اقدام فرم به‌روزرسانی کنیم.
این مانند یک کمک کننده باهوش است که چیزهایی را برای ما به خاطر می آورد و می تواند هنگام ارسال فرم، آنها را تغییر دهد.
تسویه حساب اسناد رسمی🚀
نکته مهم: در حال حاضر، useActionState فقط در کانال های Canary و آزمایشی React موجود است. برای استفاده حداکثری از آن، باید از چارچوبی استفاده کنید که از React Server Components پشتیبانی می کند.
چگونه از useActionState استفاده کنیم؟
برای استفاده از این هوک، ابتدا باید آن را از React وارد کنیم:
وارد کردن { useActionState } از ‘react’;
سپس، می‌توانیم از آن در کامپوننت خود مانند زیر استفاده کنیم:
const [state, formAction, isPending] = useActionState(actionFunction, initialState);
در اینجا معنی هر بخش آمده است:
‘حالت’ حالت فعلی ما است
“formAction” اقدام جدیدی است که در فرم خود استفاده خواهیم کرد
“عملکرد عمل” تابعی است که هنگام ارسال فرم اجرا می شود
“وضعیت اولیه” ارزش شروع دولت ما است
زمان استفاده از useActionState:
هنگامی که می خواهید وضعیت را بر اساس فرم ارسالی به روز کنید، از این قلاب استفاده کنید، به خصوص اگر از اجزای سرور استفاده می کنید و می خواهید پاسخ های سریع تری دریافت کنید.
مثال:
بیایید با استفاده از useActionState یک فرم شمارنده ساده بسازیم:
import { useActionState } from "react";
async function increment(previousState, formData) {
return previousState + 1;
}
function StatefulForm() {
const [state, formAction] = useActionState(increment, 0);
return (
);
}
در این مثال، هر بار که روی دکمه کلیک می کنیم، تعداد ما یک عدد افزایش می یابد. قلاب useActionState هنگام ارسال فرم، وضعیت را به روز می کند.
برای جزئیات بیشتر و نمونه این ویدیو را ببینید 👇
👉 Semaphor را بررسی کنید: https://semaphor.cloud (حمایت مالی پولی) سلب مسئولیت: این یک ویدیوی حمایت شده است (پرداخت شده). این مسئولیت شماست که ایمنی را ارزیابی کنید…
youtube.com
همین 😅
به یاد داشته باشید، بهترین راه برای یادگیری، انجام دادن است.
بنابراین، هنگامی که useActionState به طور گسترده در دسترس می شود، آن را در پروژه های خود امتحان کنید و ببینید که چگونه می تواند فرم های شما را بهبود بخشد!
کد نویسی مبارک!
