هوک useReducer رو میشه به عنوان یک جایگزین برای هوک useState در نظر گرفت ! در واقع هوک useReducer به ما کمک میکنه تا State های پیچیده تر کامپوننت های خودمون رو بتونیم مدیریت کنیم !
اگه State شما سادس ، همون هوک useState کاملا جوابگوی نیاز شماست اما اگه State های پیچیده تری دارید بهتره که از هوک useReducer ری اکت استفاده کنید.
ترکیب useReducer و useContext میتونه یه جایگزین عالی برای State Managment هایی مثل Redux و MobX باشه!
اگه هوک useReducer رو با هوک useContext ترکیب کنید میشه گفت دیگه نیازی به State Managment هایی مثل Redux یا MobX ندارید!
گاهی اوغات توی اپیکیشن های ری اکتی خودمون یکسری State های Global داریم. معمولا برای مدیریت این State های Global از کتابخانه هایی مثل Redux ، MobX و Recoil استفاده میکنیم .
اما میشه با ترکیب useReducer و useContext این State های Global رو بطور مناسبی مدیریت کرد که دیگه نیازی به استفاده از Redux و سایز State Managment ها نداشته باشیم .
البته ناگفته نماند که این موضوع کاملا بستگی به پروژه شما و نوع State های Global شما دارد.
درواقع هوک useReducer برای ذخیره کردن یک مقدار و بروزرسانی اون مقدار استفاده میشه . ( مثل هوک useState )
هوک useReducer دوتا آرگومان ورودی از ما دریافت میکنه :
هوک useReducer یک آرایه Return میکنه داخل این آرایه 2 چیز وجود داره :
طبق صحبت هایی که تا الان کردیم ، هوک useReducer همون کاری رو انجام میده که Redux ( یک کتابخانه برای مدیریت State ) انجام میده با چند تفاوت. اما چون قصد نداریم در این مقاله به Redux بپردازیم فقط به این نکته اشاره میکنیم که مدیریت State های Global با useReducer خیلی ساده تر است اما Redux برای مدیریت State های بسیار پیچیده و سنگین مناسبتر است.
گفتیم که هوک useReducer یک تابع reducer از ما میگیره . اما این تابع دقیقا چیه ؟
خیلی ساده بخوایم reduce رو توضیح بدیم میتونیم اون رو مثل یک دستگاه قهوه ساز در نظر بگیریم :
دستگاه قهوه ساز از شما پودر قهوه میگیره ، بهش آب داغ اضافه میکنه و قهوه تحویل شما میده ? تابع reducer از شما State قبلی رو میگیره ، یکسری عملیات روش انجام میده و State جدید رو تحویل شما میده.
هوک useReducer ری اکت مشابه همین کار رو انجام میده. هوک useReducer یک تابع reducer از ما دریافت میکنه و یک مقدار به ما Return میکنه.
تیکه کد زیر یک مثال ساده از نحوه استفاده از هوک useReducer در ری اکت هست :
const [count, dispatch] = useReducer(reducer, initialState);
تو مثال بالا به هوک useReducer دو مقدار پاس دادیم ( تابع reducer و مقدار اولیه State )
خود تابع reducer ، دو مقدار از ما میگیره و یک مقدار رو Return میکنه .
اولین مقدار State فعلی و دومین مقدار Action ما هست ( منظور از Action کاری هست که میخوایم انجام بدیم مثل اضافه کردن ، کم کردن و ..)
یعنی تابع reducer باید بصورت زیر باشه :
const reducer=(state, action)=> { } dispatch({ type: 'increment' })
در واقع تابع reducer بر اساس نوع action ارسال شده بهش ، کارهایی که باید رو انجام میده.
مثلا تو خط 3 بهش گفتیم increment ، پس داخل تابع reducer باید مشخص کنیم که اگر Action ما Increment بود چه اتفاقی بیوفته ( مثلا مقدار count زیاد بشه )
دومین آرگومانی که باید به هوک useReducer پاس بدیم ، InitialState یا همون مقدار اولیه State هست .
تو مثال زیر این کار رو انجام دادیم:
const initialState = { count: 1 } const [state, dispatch] = useReducer(reducer, initialState)
تو اولین خط تیکه کد بالا ، یک Object داریم که این Object رو به عنوان مقدار اولیه به هوک useReducer دادیم.
معادل فارسی عبارت dispatch ، اعزام هست. زمانیکه میخوایم یک کار ( action ) اتفاق بیوفته ، تابع dispatch رو صدا میزنیم .
خود تابع dispatch به عنوان ورودی از ما یک Object میگیره که نوع کار رو مشخص میکنه. در حقیقت Action توسط متود dispatch به reducer میرسه .
خود اکشنی که به reducer میفرستیم ، مشخص کننده نوع کار هست . در حقیقت داخل تابع reducer مشخص کردیم که برای هر نوع Action چه اتفاق هایی باید بیوفته .
پس از انجام عملیات dispatch با Action مدنظرمون ، Reducer کارها و محاسباتش رو انجام میده و نتیجه رو Return میکنه .
اکشن شما باید یک Object باشه که شامل 2 مقدار Key و Payload باشه :
const INCREMENT={ type : "INCREMENT", payload: null, }
تو تیکه کد بالا یک Action نمونه رو میتونید ببینید . مقدار type مشخص کننده نوع کاری هست که میخوایم با dispatch کردن اون Action انجامش بدیم.
داخل payload هم میتونیم اطلاعات مورد نیاز اون Action رو بریزیم. مثلا اگر یک Action برای ثبت نام کاربر داشته باشیم ، داخل payload اطلاعات کاربر رو میتونیم بریزیم مثل نام و فامیل شخص .
تو تیکه کد زیر یک مثال براتون آماده کردم که از هوک useReducer برای ذخیره یک عدد استفاده کردیم.
یک Action برای Reset کردن مقدار ذخیره شده داریم و یک Reducer که وظیفه دریافت Action ،انجام عملیات و return کردن مقدار جدید رو داره.
برای مشاهده مثال ها + کد ها و دسترسی به ادامه مقاله لطفا روی لینک زیر کلیک کنید :
