useReducer Hook یکی از بهترین گزینه ها برای مدیریت حالت در React است. با استفاده از این راهنما سفر خود را با useReducer Hook آغاز کنید.
مدیریت State در توسعه React بسیار مهم است و به عنوان سنگ بنای مدیریت و به روز رسانی داده ها در رابط های کاربر عمل می کند. React’s useState Hook یک رویکرد ساده برای مدیریت وضعیت ارائه می دهد، اما با وضعیت پیچیده دست و پا گیر می شود. اینجاست که useReducer Hook وارد می شود.
useReducer Hook یک روش ساختاریافته برای مدیریت حالت ها و انتقال های پیچیده ارائه می دهد. پذیرش useReducer Hook انعطاف پذیری و کارایی را باز می کند و منجر به کد پاک تر می شود.
درک useReducer Hook
useReducer Hook یک ویژگی داخلی ارائه شده توسط React است که مدیریت حالت را با رعایت اصول الگوی کاهش دهنده ساده می کند. این یک جایگزین سازماندهی شده و مقیاس پذیر برای useState Hook به شما ارائه می دهد، به ویژه برای مدیریت وضعیت های پیچیده مناسب است.
با استفاده از useReducer Hook، می‌توانید حالت و انتقال‌های آن را در یک تابع کاهنده واحد تجمیع کنید.
این تابع حالت فعلی و یک عمل را به عنوان ورودی می گیرد و متعاقباً حالت جدید را تولید می کند. این تابع بر اساس همان اصول تابع کاهنده استفاده شده در متد ()Array.prototype.reduce جاوا اسکریپت عمل می کند.
نحو و مثال استفاده از useReducer Hook
نحو برای استفاده از useReducer Hook به شرح زیر است:
const [state, dispatch] = useReducer(reducer, initialState);
تابع useReducer دو آرگومان را می پذیرد:
- کاهنده (عملکرد): نحوه به روز رسانی وضعیت را بر اساس وضعیت فعلی و اقدام ارسال شده تعیین می کند.
- initialState (any): نشان دهنده مقدار حالت اولیه برای جزء است.
پس از فراخوانی، useReducer Hook آرایه ای متشکل از دو عنصر را برمی گرداند:
- state (any): نشان دهنده مقدار وضعیت فعلی است.
- ارسال (عملکرد): این تابع ارسال اقدامات برای به روز رسانی وضعیت را امکان پذیر می کند.
مثال زیر را در نظر بگیرید که استفاده از useReducer Hook را در مدیریت یک شمارنده ساده نشان می دهد:
import React, { useReducer } from 'react';
const initialState = 0;
const reducer = (state, action) => {
switch (action.type) {
case 'increment':
return state + 1;
case 'decrement':
return state - 1;
default:
return state;
}
};
const Counter = () => {
const [count, dispatch] = useReducer(reducer, initialState);
const handleIncrement = () => {
dispatch({ type: 'increment' });
};
const handleDecrement = () => {
dispatch({ type: 'decrement' });
};
return (
<div>
<button onClick={handleIncrement}>Increment</button>
<span>{count}</span>
<button onClick={handleDecrement}>Decrement</button>
</div>
);
};
از تصویر بالا، یک حالت اولیه 0 در کنار یک تابع کاهنده که مسئول رسیدگی به دو نوع عمل است، تعریف شده است: افزایش و کاهش. تابع کاهنده به درستی وضعیت را مطابق با اقدامات مشخص شده تغییر می دهد.
با استفاده از قلاب useReducer، حالت مقداردهی اولیه می شود و هم مقدار وضعیت فعلی و هم تابع اعزام به دست می آید. تابع اعزام متعاقباً برای به‌روزرسانی وضعیت با کلیک روی دکمه‌های مربوطه استفاده می‌شود.
ساخت یک تابع کاهنده
برای استفاده بهینه از useReducer Hook، می‌توانید یک تابع کاهنده ایجاد کنید که نحوه به‌روزرسانی وضعیت را بر اساس اقدامات ارسال شده توضیح می‌دهد. این تابع کاهنده وضعیت فعلی و عمل را به عنوان آرگومان می پذیرد و حالت جدید را برمی گرداند.
به طور معمول، یک تابع کاهنده از یک دستور شرطی سوئیچ برای رسیدگی به انواع مختلف عمل و اعمال تغییرات حالت بر این اساس استفاده می کند.
مثال زیر از یک تابع کاهنده استفاده شده برای مدیریت لیست کارها را در نظر بگیرید:
const initialState = [];
const reducer = (state, action) => {
switch (action.type) {
case 'add':
return [...state, action.payload];
case 'toggle':
return state.map((todo) =>
todo.id === action.payload ? { ...todo, completed: !todo.completed } : todo
);
case 'delete':
return state.filter((todo) => todo.id !== action.payload);
default:
return state;
}
};
در مثال بالا، تابع کاهنده سه نوع عمل مجزا را کنترل می کند: افزودن، تغییر وضعیت و حذف. به محض دریافت اکشن افزودن، payload (یک مورد جدید todo) را به آرایه حالت اضافه می کند.
در مورد عمل تعویض، ویژگی تکمیل شده مورد todo مرتبط با شناسه مشخص شده را جایگزین می کند. از طرف دیگر، اقدام حذف، مورد todo مرتبط با شناسه ارائه شده را از آرایه حالت حذف می کند.
اگر هیچ یک از انواع عملکرد مطابقت نداشته باشد، تابع کاهنده وضعیت فعلی را بدون تغییر برمی گرداند.
عملیات اعزام
برای انجام به‌روزرسانی‌های حالت که توسط useReducer Hook تسهیل می‌شود، ارسال اقدامات ضروری است. کنش‌ها اشیاء جاوا اسکریپت ساده را نشان می‌دهند که نوع مورد نظر تغییر حالت را مشخص می‌کنند.
مسئولیت رسیدگی به این اقدامات و ایجاد حالت بعدی بر عهده عملکرد کاهنده است.
تابع اعزام، ارائه شده توسط useReducer Hook، برای ارسال اقدامات استفاده می شود. یک شی اکشن را به عنوان آرگومان می پذیرد و در نتیجه به روز رسانی وضعیت مربوطه را تحریک می کند.
در مثال‌های قبلی، اقدامات با استفاده از ارسال نحو ({type: ‘actionType’}) ارسال شدند. با این حال، می توان تصور کرد که اقدامات شامل داده های تکمیلی، شناخته شده به عنوان بار، که بینش های بیشتری را در مورد به روز رسانی ارائه می دهد. برای مثال:
dispatch({ type: 'add', payload: { id: 1, text: 'Finish homework', completed: false } });
در این سناریو، اکشن افزودن شامل یک شیء باری است که جزئیات مورد جدید را که باید در حالت گنجانده شود، محصور می کند.
مدیریت وضعیت پیچیده با useReducer
قدرت واقعی useReducer Hook در توانایی آن برای مدیریت ساختارهای حالت پیچیده است که شامل مقادیر متعدد به هم پیوسته و انتقال حالت پیچیده است.
با متمرکز کردن منطق حالت در یک تابع کاهنده، مدیریت انواع کنش های متنوع و به روز رسانی سیستماتیک حالت به یک تلاش عملی تبدیل می شود.
سناریویی را در نظر بگیرید که در آن فرم واکنش از چندین فیلد ورودی تشکیل شده است. به جای مدیریت وضعیت هر ورودی به صورت جداگانه از طریق useState، از useReducer Hook می توان برای مدیریت کل نگر حالت فرم استفاده کرد.
تابع کاهنده می تواند به خوبی اقدامات مربوط به اصلاح فیلدهای خاص و اعتبارسنجی جامع کل فرم را انجام دهد.
const initialState = {
name: '',
email: '',
password: '',
isFormValid: false,
};
const reducer = (state, action) => {
switch (action.type) {
case 'updateField':
return { ...state, [action.payload.field]: action.payload.value };
case 'validateForm':
return { ...state, isFormValid: action.payload };
default:
return state;
}
};
در مثال، تابع کاهنده به دو نوع عمل مجزا پاسخ می دهد: updateField و validateForm. عمل updateField با استفاده از مقدار ارائه شده، اصلاح یک فیلد خاص را در داخل حالت تسهیل می کند.
برعکس، اقدام validateForm ویژگی isFormValid را بر اساس نتیجه اعتبار سنجی ارائه شده به روز می کند.
با استفاده از useReducer Hook برای مدیریت حالت فرم، تمام حالات و اقدامات مرتبط در یک موجودیت منفرد ادغام می شوند، بنابراین سهولت درک و نگهداری را افزایش می دهند.
مقایسه useReducer با سایر راه حل های مدیریت دولتی
اگرچه useReducer Hook به عنوان یک ابزار قدرتمند برای مدیریت دولتی است، اما در مقایسه با راه‌حل‌های مدیریت حالت جایگزین در اکوسیستم React، تشخیص تفاوت‌ها و معاوضه‌های آن حیاتی است.
استفاده از ایالت
UseState Hook برای مدیریت حالت های ساده و ایزوله در یک جزء کافی است. نحو آن در مقایسه با useReducer مختصر و ساده تر است. با این وجود، برای انتقال وضعیت یا حالت پیچیده، useReducer رویکرد سازماندهی بیشتری را ارائه می دهد.
Redux
Redux یک کتابخانه مدیریت دولتی برجسته برای برنامه های React است. به الگوی کاهنده مشابه useReducer پایبند است، اما ویژگی‌های اضافی مانند فروشگاه متمرکز، پشتیبانی میان‌افزار و اشکال‌زدایی سفر در زمان را ارائه می‌کند.
Redux برای برنامه های کاربردی در مقیاس بزرگ که نیازمند الزامات پیچیده مدیریت ایالت هستند ایده آل است. با این حال، برای پروژه های کوچکتر یا نیازهای مدیریت ایالتی ساده تر، useReducer می تواند به عنوان جایگزینی سبک و ساده تر عمل کند.
Context API
React’s Context API اشتراک‌گذاری حالت را در چندین مؤلفه بدون توسل به حفاری پایه امکان‌پذیر می‌سازد. در ارتباط با useReducer، می تواند یک راه حل متمرکز مدیریت حالت ارائه دهد.
در حالی که ترکیب Context API و useReducer از قدرت قابل توجهی برخوردار است، ممکن است در کنار هم قرار گرفتن با استفاده از useReducer به صورت مجزا، پیچیدگی بیشتری ایجاد کند.
Context API هنگامی که نیاز به اشتراک گذاری حالت در میان اجزای عمیق تو در تو وجود دارد یا زمانی که با یک سلسله مراتب پیچیده مولفه مواجه می شوید، بهترین استفاده را دارد. انتخاب یک راه حل مناسب مدیریت وضعیت وابسته به الزامات خاص برنامه در دست است.
برای پروژه‌های با اندازه متوسط، useReducer می‌تواند جایگزین مؤثر و ساده‌تری برای Redux یا Context API باشد.
رهاسازی سادگی مدیریت دولتی
useReducer Hook به عنوان ابزاری قدرتمند برای ساده‌سازی مدیریت حالت در برنامه‌های React است. با پایبندی به اصول الگوی کاهنده، رویکردی ساختاریافته و مقیاس‌پذیر برای مدیریت انتقال‌های حالت و حالت پیچیده ارائه می‌دهد.
هنگامی که در کنار useState Hook استفاده می شود، useReducer می تواند به عنوان یک جایگزین سبک وزن برای کتابخانه هایی مانند Redux یا Context API، به ویژه در زمینه پروژه های کوچکتر تا متوسط عمل کند.