مهم ترین هوک در React/Next.js در 2024 : هوک useActionState

فرم ها بخشی جدایی ناپذیر از برنامه های کاربردی وب هستند که تعامل کاربر و ارسال داده ها را تسهیل می کنند. از لحاظ تاریخی، مدیریت استیت های فرم و رسیدگی به ارسال فرم ها شامل هوک ها و استراتژی های مختلفی بود. با معرفی useActionState، چشم انداز مدیریت فرم در Next.js و ری اکت برای تغییر قابل توجهی آماده شده است.هوک useActionState که در React 19 معرفی شد، انقلابی در نحوه مدیریت برنامه‌های React با اکشن های سرور ایجاد می‌کند، همچنین این هوک در Next.js 15 در دسترس خواهد بود.  در این مقاله از آنوفل می خواهیم با هوک useActionState آشنا شویم و آن را مورد بررسی قرار دهیم.

هوک useActionState چیست؟

هوک useActionState برای مدیریت یکپارچه اکشن های سرور طراحی شده است. هنگامی که یک اکشن سرور را به useActionState ارسال می کنید، یک آبجکت حاوی خطا (یا استیت)، وضعیت isPending و خود اکشن را برمی گرداند. این راه‌اندازی به‌ویژه برای مدیریت ارسال‌های فرم و ردیابی وضعیت بارگذاری قبل از بازگرداندن نتیجه مفید است.

هوک useActionState در حال حاضر فقط در کانال‌های Canary و آزمایشی React موجود است. علاوه بر این، باید از چارچوبی استفاده کنید که از React Server Components پشتیبانی کند تا از مزایای آن کامل استفاده کنید.

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

const [state, formAction] = useActionState(fn, initialState, permalink?);

مزایای کلیدی هوک useActionState

هوک useActionState مزایای بسیار خوبی دارد که می توانید در اپلکیشن های ری اکت و نکست آز آن استفاده کنید.پ

مدیریت استیت بارگیری ساده

پیش از این، مدیریت استیت های بارگذاری در فرم ها به ترکیبی از ()useFormState و ()useFormStatus نیاز داشت. با این حال، دومی فقط در سطح کامپوننت خاصی کار می‌کرد و برای مثال، ایجاد کامپوننت های جداگانه برای مدیریت استیت های دکمه را ضروری می‌کرد. با useActionState این پیچیدگی از بین می رود. شما به طور مستقیم یک استیت در حال تعلیق دریافت می کنید، که مدیریت ارسال فرم ها و سایر اکشن های سرور را آسان تر می کند.

تطبیق پذیری فراتر از فرم ها

اگرچه useActionState برای مدیریت فرم عالی است، اما کاربرد آن فراتر از آن است. بر خلاف ()useFormState، که به طور گمراه کننده نامگذاری شده است زیرا پیشنهاد می کند فقط در فرم ها استفاده شود، useActionState به درستی برای نشان دادن کاربرد گسترده تر آن نامگذاری شده است. می توان از آن برای هر اکشن سرور استفاده کرد و آن را به ابزاری مناسب تر و همه کاره تر تبدیل کرد.

بهبود مدیریت خطا

useActionState همچنین مدیریت خطا را ساده می کند. هنگامی که یک اکشن سرور یک خطا را برمی‌گرداند، بدون زحمت در داخل هوک مدیریت می‌شود و کدهای پاک‌تر و خواناتر را امکان‌پذیر می‌کند.
 

با آپولوکلاینت چقدر آشنا هستید برای استفاده از API های GraphQL در ری اکت این مقاله را بررسی کنید. در صورتی که  میخواهید بین ری اکت 19 و ری اکت 18 تفاوت ها را بررسی کنید، این مقاله را مورد بررسی قرار دهید.

چگونه از useActionState استفاده کنیم؟

برای استفاده از این هوک، ابتدا باید آن را از React وارد کنیم:

import { useActionState } from 'react';

سپس، می توانیم از آن در کامپوننت خود به این صورت استفاده کنیم:

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

در اینجا معنی هر بخش آمده است:

• "state" استیت فعلی ما است
  "formAction" اکشن جدیدی است که در فرم خود استفاده خواهیم کرد
  "actionFunction" تابعی است که هنگام ارسال فرم اجرا می شود
  "InitialState" مقدار اولیه استیت ما است

هوک useActionState چگونه کار می کند؟

Trigger: یک اکشن سرور معمولاً در یک کنترل کننده رویداد آغاز می شود.
به روز رسانی وضعیت: useActionState فوراً استیت کامپوننت شما را با استیت معلق به روز می کند. این به شما امکان می‌دهد نشانگرهای بارگیری را نمایش دهید یا دکمه‌ها را غیرفعال کنید.
ارتباط سرور: React با سرور شما ارتباط برقرار می کند تا اکشن را اجرا کند.
وضوح استیت: پس از اتمام (موفقیت یا شکست)، useActionState وضعیت را دوباره با نتیجه به روز می کند. این به شما امکان می دهد پیام های موفقیت آمیز، خطاها، یا به روز رسانی عناصر رابط کاربری مربوطه را نشان دهید.

زمان استفاده از useActionState

هنگامی که می خواهید وضعیت را بر اساس فرم ارسالی به روز کنید، از این هوک استفاده کنید، به خصوص اگر از کامپوننت های سرور استفاده می کنید و می خواهید پاسخ های سریع تری داشته باشید.

مثال اول:

بیایید با استفاده از useActionState یک فرم شمارنده ساده بسازیم:

import { useActionState } from "react";

async function increment(previousState, formData) {
  return previousState + 1;
}

function StatefulForm() {
  const [state, formAction] = useActionState(increment, 0);
  return (
    <form>
      {state}
      <button formAction={formAction}>Increment</button>
    </form>
  );
}

در این مثال، هر بار که روی دکمه کلیک می کنیم، تعداد ما یک عدد افزایش می یابد. هوک useActionState هنگام ارسال فرم، وضعیت را به روز می کند. به یاد داشته باشید، بهترین راه برای یادگیری، انجام دادن است.

بنابراین وقتی useActionState گسترده‌تر شد، آن را در پروژه‌های خود امتحان کنید و ببینید چگونه می‌تواند فرم‌های شما را بهبود بخشد!

ری اکت کوئری React Query چیست؟

ریداکس چیست؟ بررسی کامل و عمیق

مثال دوم :

'use client';
 
import { useActionState } from 'react';
import { action } from './action';
 
const Homepage = () => {
  const [state, formAction, isPending] = useActionState(action, {
    name: '',
    error: '',
    status: false,
  });
 
  console.log(state);
 
  return (
    <main>
      <form action={formAction}>
        <input type="text" name="name" />
        <button type="submit" disabled={isPending}>
          {isPending ? 'Loading...' : 'Submit'}
        </button>
      </form>
    </main>
  );
};
 
export default Homepage;

در اینجا ما یک فرم ساده با یک فیلد ورودی و یک دکمه ارسال داریم. ما از هوک useActionState برای مدیریت استیت فرم و اکشن استفاده می کنیم. تابع اکشن یک اکشن سرور است که هنگام ارسال فرم آن را فراخوانی می کنیم.

همانطور که می بینید ما تابع action و استیت اولیه را به هوک useActionState منتقل می کنیم. آرایه ای از state، formAction و isPending را برمی گرداند. می توانیم از state برای نشان دادن استیت فرم و از formAction برای فراخوانی اکشن سرور استفاده کنیم. isPending هنگام ارسال فرم true و زمانی که ارسال گردید false خواهد بود.

حالا بیایید ببینیم فایل action.ts چگونه به نظر می رسد. ما باید آن را در فایل جداگانه نگهداری کنیم زیرا کامپوننت صفحه اصلی ما یک کامپوننت سمت سرویس کلاینت است و نمی توانیم اکشن های سرور را مستقیماً از سمت کلاینت فراخوانی کنیم.

'use server';
 
export const action = async (prevState: any, queryData: FormData) => {
  const name = queryData.get('name') as string;
 
  /// Validate the name | you can use zod for validation
  if (!name || name.trim() === '') {
    return {
      name: '',
      error: 'Name is required',
      status: false,
    };
  }
 
  /// Save the name to the database
  console.log(name);
 
  return {
    name: '',
    error: '',
    status: true,
  };
};

همانطور که می بینید ما در حال export یک تابع action هستیم که prevState و queryData را به عنوان آرگومان می گیرد. ما نام را از queryData می گیریم و اعتبار آن را تأیید می کنیم. و با اعتبارسنجی، استیت جدید را برمی‌گردانیم. که در کامپوننت HomePage به روز می شود. در صورت عدم وجود خطا، می توانید عملیاتی را که می خواهید با داده ها انجام دهید و به استیت جدید برگردید.

نتیجه

هوک useActionState یک هوک قدرتمند و همه کاره در React/Next.js است که مدیریت استیت بارگیری را ساده می‌کند، مدیریت خطا را بهبود می‌بخشد و فراتر از فرم‌ها قابل اجرا است و آن را به ابزاری ضروری برای مدیریت اکشن های سرور در سال 2024 تبدیل می‌کند.