useState یا useReducer – کدام را برای برنامه خود انتخاب کنید

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

ما قصد داریم این قلاب ها را با جزئیات بررسی کنیم و بهترین قلاب را برای استفاده در هر برنامه مشخصی نشان دهیم و چگونه می توانیم یکی از این قلاب ها را به دیگری تبدیل کنیم. بیا شروع کنیم.

قلاب حالت رایج – useState، یک قلاب واکنش است که به شما امکان می دهد یک متغیر حالت را به جزء خود اضافه کنید. معمولا اینطور نوشته می شود:

const [state, setState] = useState(initialState)

useState یک حالت اولیه می گیرد که می تواند رشته، بولی، عدد، آرایه، شی یا تابع باشد. دو مقدار برمی گرداند که عبارتند از:

1. حالت – این وضعیت فعلی است
2. setState – این تابعی است که وضعیت را به روز می کند.

یک مثال ساده به این صورت است:

const [country, setCountry] = useState('Nigeria');
const handleClick = () => {
    setCountry('South Africa');
}

قطعه کد بالا یک مثال ساده از آن است useState هوک و اینکه چگونه می توانیم از آن برای به روز رسانی وضعیت استفاده کنیم. اگر handleClick تابع به یک دکمه منتقل می‌شود، با کلیک کردن روی دکمه، برنامه مجدداً ارائه می‌شود تا به‌روزرسانی را نشان دهد – “آفریقای جنوبی” برای متغیر حالت کشور.

useReducer دقیقا چیست؟

useReducer یک قلاب React است که به شما امکان می دهد یک کاهش دهنده به کامپوننت خود اضافه کنید. بنابراین، کاهش دهنده چیست؟ کاهنده تابعی است که به ما امکان می دهد تمام منطق به روز رسانی حالت را در یک تابع مشخص کنیم.

useReducer دو پارامتر اصلی و پارامتر سوم اختیاری را می گیرد. دو مقدار را برمی‌گرداند – state و dispatch. وضعیت وضعیت فعلی است و ارسال تابعی است که به شما امکان می دهد وضعیت را به روز کنید.

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

همان مثال ساده با useReducer:

const reducer = (state, action) => {
    switch (action.type) {
        case 'change_country': {
            return {
                country: action.newCountry
            }
        }
        // other cases are written here
        default: {
            return state
        }
    }
}

const [state, dispatch] = useReducer(reducer, {country: 'Nigeria'});

const handleClick = () => {
dispatch({
    type: 'change_country',
    newCountry: 'South Africa'
})
}

توضیحی در مورد نمونه کد بالا – ما خود را فراخوانی کردیم useReducer که یک کاهنده را می پذیرد که حاوی منطق به روز رسانی حالت و یک حالت اولیه است { country: ‘Nigeria’ }. ما تابع اعزام را در کنترل کننده کلیک فراخوانی می کنیم. عبور در نوع عملی که می خواهیم با مقدار حالت بعدی انجام دهیم.

ارسال و کاهش دهنده توضیح داده شده است

تابع اعزام: تابع اعزام که توسط useReducer به شما امکان می دهد وضعیت را به مقدار دیگری به روز کنید و یک رندر مجدد را راه اندازی کنید. شما باید اکشن را به عنوان تنها آرگومان به تابع dispatch منتقل کنید. یک اقدام معمولاً یک شی با یک ویژگی نوع است که آن را مشخص می کند و، به صورت اختیاری، ویژگی های دیگر با اطلاعات اضافی.

dispatch({
    type: ‘change_country’,
    // other properties
})

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

function reducer(state, action) {
    // state updates are made here
}

ما با استفاده از هر دو حالت را با موفقیت به‌روزرسانی کردیم useState و useReducer. بنابراین، یک قلاب بر دیگری چه کاربردی دارد؟ در ادامه این مقاله به این موضوع خواهیم پرداخت.

مقایسه useState و useReducer

• useReducer شبیه است به useState. useReducer ما را قادر می سازد تا منطق به روز رسانی حالت خود را به یک تابع واحد منتقل کنیم که برای برنامه های بزرگتر کارآمدتر است.

• useState راه اندازی برای برنامه های کوچکتر ساده و آسان است، اما وقتی برنامه پیچیده می شود، خواندن آن با منطق بسیاری از حالت ها در کنترل کننده رویداد دشوار می شود. useReducer ثابت می کند که برای این مورد استفاده کارآمد است زیرا به سازماندهی منطق حالت ما در یک مکان کمک می کند.

• useReducer اشکال زدایی در یک برنامه پیچیده آسان تر است، زیرا می توانید به راحتی اکشنی را که ارسال نشده، اما با آن انجام می شود، پیدا کنید useState، برای شناسایی خطا باید یک کد طولانی را بررسی کنید.

• بررسی نمونه کد بالا، با استفاده از useState منجر به تعداد خطوط کد کمتری شد. در حالی که وقتی برنامه بزرگتر می شود این برای برنامه های کوچکتر خوب است، خطوط کد نیز افزایش می یابد. استفاده كردن useReducer تفکیک منطق در یک تابع رویکرد بهتری برای کاربردهای بزرگتر است.

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

چگونه از useState به useReducer مهاجرت کنیم.

ما قصد داریم نمونه ای را بررسی کنیم که از هر دو استفاده می کند useState و useReducer. بنابراین، خواهید دید که چگونه می توانیم از یکی به دیگری مهاجرت کنیم. در اینجا یک برنامه ساده است که کاربر را دریافت می کند first_name و last_name با دکمه ای برای افزودن نام ها به لیست نام های موجود و دکمه ای برای تنظیم مجدد لیست نام ها.

مراحلی که باید دنبال کرد:

• از حالت تنظیم به عملیات ارسال حرکت کنید.
• یک تابع کاهنده بنویسید.
• از کاهنده مولفه خود استفاده کنید.

این شامل نمونه کد برنامه ما است. برای مشاهده اجرای منطق به روز رسانی حالت ما با استفاده از useStateکامپوننت FormUsingReducer را در App.js بیان کنید و کامپوننت Form را در App.js حذف کنید و بالعکس. useReducer.

نتیجه

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

درک مفاهیمی که استفاده می کنیم و کشف مفاهیم جدید برای رشد به عنوان توسعه دهندگان حیاتی است. امیدوارم چیزی یاد گرفته باشید و از به کار بردن آموخته هایتان در پروژه بعدی خود هیجان زده باشید.

با تشکر برای خواندن.