قطعا تا الان اسم useReducer به گوشتون خورده، اینکه درتلاشه برای حل چه مشکلی و نحوه استفاده ازش رو در ادامه بررسی میکنیم.
اگر توسعه دهنده ریکت باشید، قطعا تا الان از state ها استفاده کردید (با استفاده از useState hook) و میدونید که این useState hook یک ورودی از ما دریافت میکنه و یک خروجی میدهد، که ورودی همون initial state هستش (مقدار اولیه برای این state) و خروجی هم یک array هست از دو مقدار، اولی خود state و دومی تابع setter اون state که با استفاده ازش مقدار درون state رو تغییر میدادیم و باعث Rerender شدن کامپوننت میشدیم.
حالا بنظرت چرا من useState رو یکبار دیگه توضیح دادم؟! ببین useReducer دقیقا کار useState رو انجام میده فقط تنها تفاوتی که دارن اینه که useReducer یکسری مشکلاتی که useState داشته رو برطرف کرده.
طبیعیه زمانی که تعداد variable state ها و update state هامون داخل یک کامپوننت زیاد بشه، مدیریت کردنشون داخل همون کامپوننت سخت باشه، در چنین شرایطی ما با استفاده از useReducer منطق و logic اون کامپوننت رو ازش جدا میکنیم و باعث خوانایی بهتر کدمون میشیم.
قطعا براتون پیش‌امده که نیاز داشتید چنتا state update رو در یک زمان واحد انجام بدید، به طور مثال زمانی که یک بازی شروع میشه شما نیاز دارید که نمرات رو صفر کنید، تایمر بازی رو ست کنید، و ...
خیلی از اوقات update کردن یک state وابسته به وضعیت یک state دیگر است، و اگر درون اون کامپوننت تعداد زیادی state وجود داشته باشه، انجام این کار بدون استفاده از useReducer میتونه خوانایی کد شما رو کاهش بده.
از useReducer زمانی استفاده میکنیم که میدیریت state های کامپوننتمون پیچیده شده و باید منطق کامپوننت رو ازش جدا کنیم.
همونطور که میدونی useReducer یکی از hook های پیشفرض React هست و باید از خود این کتابخانه import بشه، دقیقا مثل useState.
دوتا ورودی داره، اولی reducer function هست و دومی initial state
و به همین‌شکل دو خروجی هم داره به شکل یک Array که اولی state و دومی dispatch هست.
این دقیقا همون تابعی هست که تمام منطق update state های مارو داخل خودش نگهداری میکنه، این تابع دو ورودی داره، اولی state هست و دومی مقداری است به نام action (در ادامه توضیح میدم action چیه)
یادته در useState ما مقدار اولیه داشتیم؟! اینجا هم دقیقا به همون شکل هستش، یعنی مقدار اولیه‌ای که قرار میدیم درون state ذخیره میشه.
این state از useReduceer خروجی داده شده، و دقیقا مثل state هایی که از useState خروجی داده میشدن میشه ازش استفاده کرد.
یادته، وقتی از useState استفاده میکردیم یک مقدار setter هم بهمون برمیگرداند که ازش برای update کردن state استفاده میکردیم؟! این هم دقیقا با همون هدف ایجاد شده، یعنی تابعی هست که یک ورودی دریافت میکنه و با استفاده از اون ورودی مقدار state رو update میکنه، که این ورودی دقیقا همون مقدار Action داخل تابع reducer هست که بالاتر توضیح دادیم.
یک استاندارد بین برنامه‌نویس‌ها وجود داره برای ورودی این dispatch function اون هم به این صورت هست که یک Object با دو کلید Type و Payload دریافت میکنند. کلید Type مشخص میکنه الان قراره چه اتفاقی برای state بیوفته، و Payload هم مقداری هست که قراره بدیم به State.
