تسلط بر React's useReducer Hook: Managing Complex State with Actions

Summarize this content to 400 words in Persian Lang

useReducer در React هوک کنید

این useReducer هوک یک قلاب داخلی React است که برای مدیریت منطق وضعیت پیچیده‌تر در اجزای عملکردی استفاده می‌شود. جایگزینی برای useState زمانی که نیاز به مدیریت حالتی دارید که شامل چندین مقدار فرعی است یا زمانی که منطق حالت پیچیده است، قلاب کنید. در حالی که useState برای مدیریت حالت ساده خوب است، useReducer روشی ساختارمندتر و مقیاس‌پذیرتر برای مدیریت به‌روزرسانی‌های حالت ارائه می‌کند، به‌ویژه زمانی که انتقال‌های حالت به اقدامات وابسته هستند.

چیست useReducer?

این useReducer قلاب اغلب زمانی ترجیح داده می شود که:

حالت دارای مقادیر متعددی است که به یکدیگر بستگی دارند.
شما انتقال حالت پیچیده ای دارید.
شما باید اقدامات را به طور صریح انجام دهید (مانند Redux).

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

نحو از useReducer

const [state, dispatch] = useReducer(reducer, initialState);

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

reducer: تابعی که حالت فعلی و یک عمل را می گیرد و حالت جدیدی را برمی گرداند.

initialState: مقدار حالت اولیه که کاهنده با آن کار خواهد کرد.

state: وضعیت فعلی، به روز شده توسط کاهنده.

dispatch: تابعی که برای ارسال کنش‌ها به کاهنده استفاده می‌شود که به‌روزرسانی‌های حالت را راه‌اندازی می‌کند.

چگونه useReducer کار می کند

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

const reducer = (state, action) => {
switch (action.type) {
case ‘increment’:
return { count: state.count + 1 };
case ‘decrement’:
return { count: state.count – 1 };
default:
return state;
}
};

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

تعریف حالت اولیه:
این initialState نقطه شروع ایالت قبل از انجام هر اقدامی است.

const initialState = { count: 0 };

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

استفاده کنید useReducer در مؤلفه شما:
اکنون، در داخل کامپوننت خود، می توانید استفاده کنید useReducer برای رسیدگی به دولت شما دریافت خواهید کرد state و dispatch از قلاب

const Counter = () => {
const [state, dispatch] = useReducer(reducer, initialState);

return (
<div>
<p>Count: {state.count}</p>
<button onClick={() => dispatch({ type: ‘increment’ })}>Increment</button>
<button onClick={() => dispatch({ type: ‘decrement’ })}>Decrement</button>
</div>
);
};

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

توضیح:

زمانی که Increment دکمه کلیک می شود، یک عمل با نوع ارسال می کند ‘increment’.
تابع کاهنده این عمل را دریافت کرده و وضعیت را متناسب با آن به روز می کند.

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

مثال کامل با useReducer:

در اینجا یک مثال کامل است که استفاده از آن را نشان می دهد useReducer برای مدیریت یک شمارنده:

import React, { useReducer } from ‘react’;

// Reducer function
const reducer = (state, action) => {
switch (action.type) {
case ‘increment’:
return { count: state.count + 1 };
case ‘decrement’:
return { count: state.count – 1 };
case ‘reset’:
return { count: 0 };
default:
return state;
}
};

// Initial state
const initialState = { count: 0 };

const Counter = () => {
const [state, dispatch] = useReducer(reducer, initialState);

return (
<div>
<h2>Count: {state.count}</h2>
<button onClick={() => dispatch({ type: ‘increment’ })}>Increment</button>
<button onClick={() => dispatch({ type: ‘decrement’ })}>Decrement</button>
<button onClick={() => dispatch({ type: ‘reset’ })}>Reset</button>
</div>
);
};

export default Counter;

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

توضیح:

useReducer با مقداردهی اولیه می شود reducer تابع و initialState.

dispatch برای راه اندازی اقدامات (افزایش، کاهش یا تنظیم مجدد) استفاده می شود.
هر عمل بر اساس نوع اقدام منجر به بروز رسانی حالت می شود.

زمان استفاده useReducer تمام شد useState

منطق حالت پیچیده: زمانی که حالت شامل چندین مقدار فرعی یا انتقال پیچیده بین حالت باشد.

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

برای چندین اقدام بهتر است: اگر کامپوننت شما عملکردهای مختلفی دارد که حالت را به طرق مختلف تغییر می دهد (به عنوان مثال، افزایش، کاهش، تنظیم مجدد).
اشکال زدایی: useReducer قابل پیش بینی تر و آزمایش پذیرتر است. از آنجایی که انتقال حالت صریح است (از طریق اقدامات)، ردیابی تغییرات و اشکال زدایی را آسان تر می کند.
بیشتر شبیه Redux: اگر در حال ساخت یک برنامه در مقیاس بزرگتر هستید که بعداً از Redux استفاده خواهد کرد، useReducer الگوی مشابهی دارد و می تواند پله خوبی باشد.

ملاحظات عملکرد

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

مقایسه کردن useState در مقابل useReducer

ویژگی
useState
useReducer

سادگی
ایده آل برای حالت ساده با مقادیر اولیه
بهترین حالت برای وضعیت پیچیده یا اقدامات چندگانه

ساختار دولتی
برای مقادیر منفرد یا آرایه ها/اشیاء به خوبی کار می کند
عالی برای اشیاء حالت با مقادیر فرعی متعدد

اکشن هندلینگ
به اقداماتی نیاز ندارد. فقط به روز رسانی حالت مستقیم
برای به‌روزرسانی وضعیت به اشیاء عمل نیاز دارد

استفاده از مورد
قطعات کوچک و مستقل از دولت
انتقال حالت پیچیده با اقدامات زیاد

خلاصه از useReducer قلاب

useReducer برای مدیریت منطق حالت پیچیده در React استفاده می شود.
کنترل بیشتری بر روی انتقال حالت در مقایسه با useState و زمانی ایده آل است که حالت به اقدامات وابسته باشد یا نیاز به به روز رسانی به روشی ساختار یافته باشد.
قلاب یک آرایه را برمی گرداند: وضعیت فعلی و a dispatch عملکردی را برای راه اندازی اقداماتی که وضعیت را به روز می کند، راه اندازی می کند.
از a استفاده می کند عملکرد کاهنده که وضعیت فعلی و اقدامی برای محاسبه و برگرداندن حالت جدید دریافت می کند.

نتیجه گیری

این useReducer هوک برای مدیریت منطق پیچیده حالت در React قدرتمند است. این به شما کنترل بیشتری بر به‌روزرسانی‌های حالت می‌دهد و مدیریت انتقال‌های حالت را که به مقادیر یا اقدامات متعدد بستگی دارد، آسان‌تر می‌کند. اگر کامپوننت شما حالت پیچیده ای دارد که نیاز به به روز رسانی ساختار یافته دارد، یا اگر از Redux آمده اید، useReducer یک راه حل عالی است

const [state, dispatch] = useReducer(reducer, initialState);

   const reducer = (state, action) => {
     switch (action.type) {
       case 'increment':
         return { count: state.count + 1 };
       case 'decrement':
         return { count: state.count - 1 };
       default:
         return state;
     }
   };

   const initialState = { count: 0 };

   const Counter = () => {
     const [state, dispatch] = useReducer(reducer, initialState);

     return (
       <div>
         <p>Count: {state.count}</p>
         <button onClick={() => dispatch({ type: 'increment' })}>Increment</button>
         <button onClick={() => dispatch({ type: 'decrement' })}>Decrement</button>
       </div>
     );
   };

import React, { useReducer } from 'react';

// Reducer function
const reducer = (state, action) => {
  switch (action.type) {
    case 'increment':
      return { count: state.count + 1 };
    case 'decrement':
      return { count: state.count - 1 };
    case 'reset':
      return { count: 0 };
    default:
      return state;
  }
};

// Initial state
const initialState = { count: 0 };

const Counter = () => {
  const [state, dispatch] = useReducer(reducer, initialState);

  return (
    <div>
      <h2>Count: {state.count}</h2>
      <button onClick={() => dispatch({ type: 'increment' })}>Increment</button>
      <button onClick={() => dispatch({ type: 'decrement' })}>Decrement</button>
      <button onClick={() => dispatch({ type: 'reset' })}>Reset</button>
    </div>
  );
};

export default Counter;