خداحافظی با Redux در چند خط کد (‌ useReducer + Context API )

با سلام به همه دوستان امیدوارم که تو این روز ها حال همتون خوب باشه این روزا داخل برنامه نویسی react خیلی باب شده که میشه دیگه از `Redux` استفاده نکرد و به جای اون از `Context API` و `useReducer` استفاده کنیم.

برای این که بهتر متوجه بشین باید اطلاعاتی در مورد Hooks و Redux داشته باشید به همین دلیل بنده پیشنهاد تا انتهای این مقاله همراه ما باشید.

خیلی عالیه ولی یه سری سوال پیش میاد که ما میتونیم چند تا Reducer هم کنار همدیگه به صورت Sync داشته باشم ؟ یا مثلا چطوری میتونیم از Wrapper Hell توی پروژمون جلوگیری کنیم یا ازین دست مساعل ...

A wrapper hell is like :
<ThemeProvider>
--- <AuthProvider>
------ <NewsProvider>
--------- <PostProvider>
------------ And So on..
--------- </PostProvider>
------ </NewsProvider/>
--- </AuthProvider>
</ThemePrivder>

برای این که بهتر این موضوع را درک کنید من یه پروژه خیلی ساده با Redux میاریم بالا بعدش بعد ازینکه با ساختارش آشنا شدیم میایم و عین همون رو با `useReducer` , `Context API` میسازیم.

کد بزنیم؟

حالا شروع میکنیم به ساخت یه پروژه ساده با Redux :

• اول از همه باید Provider و Store رو به پروژه اضافه کنیم.

• در مرحله بعدی باید `rootReducer` رو ایجاد کنیم.

• و در مرحله آخر `Action` ها رو ایجاد میکنم .

خوب الان ما یک پروژه ساده با Redux بالا آوردیم و میتونیم ازش استفاده کنیم.

خوب حالا بریم برای ساخت همین ساختار با استفاده از Context API و useReduder.

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

• مرحله اول با استفاده از Context API یک StateProvider میسازیم به این شکل .

خوب تو این مرحله ما یک StateContext ساختیم و از روی اون یک Provider به نام StateProvider ساختیم که value اون useReducer هست که کارش اینکه یک Reducer و initialState میگیره و به ما state و dispatch برمیگردونه.

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

همون طور که میبینید عین همون حالت قبلیه ولی فقط برای توابعی که داریم اسم های userReducer , countReducer رو قرار دادیم. حالا rootReducer ما یه چنین شکلی داره :

خوب همون طور که میبیند برای اینکه به userReducer و countReducer ما همون state برسی که ما نیاز داریم به این شکل اومدیم state رو destruct کردیم.

• حالا در مرحله آخر برای استفاده ازین StateProvider کافیه که اون روی App.js خودمون Wrap کنیم و با استفاده از useStateValue که ساختیم بیایم و از state , dispatch که به عنوان خروجی بهمون میده استفاده کنیم .

و تماااام

جمع بندی

خب من فعلا تو این پست قصد ندارم بگم که اصن اینکار کار درستیه یا نه ولی صرفا تجربه جالبیه چون هم توی این مسیر تونستین تجربه خوبی در استفاده از Context , useContext , useReducer ها بدست بیاورید.