با سلام به همه دوستان امیدوارم که تو این روز های کرونایی حال همتون خوب باشه , این روزا بین برنامه نویس های React js خیلی باب شده که میتونیم دیگه از `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 :
خوب الان ما یک پروژه ساده با Redux بالا آوردیم و میتونیم ازش استفاده کنیم.
خوب حالا بریم برای ساخت همین ساختار با استفاده از Context API و useReduder.
فقط قبل از شروع پیشنهاد میکنم که حتما پست زیر رو بخونید تا درک بهتری از hook ها و مخصوصا useReducer پیدا کنید .
خوب تو این مرحله ما یک StateContext ساختیم و از روی اون یک Provider به نام StateProvider ساختیم که value اون useReducer هست که کارش اینکه یک Reducer و initialState میگیره و به ما state و dispatch برمیگردونه.
همون طور که میبینید عین همون حالت قبلیه ولی فقط برای توابعی که داریم اسم های userReducer , countReducer رو قرار دادیم. حالا rootReducer ما یه چنین شکلی داره :
خوب همون طور که میبیند برای اینکه به userReducer و countReducer ما همون state برسی که ما نیاز داریم به این شکل اومدیم state رو destruct کردیم.
و تماااام حالا برای اینکه بتونید درک بهتری از موضوع پیدا کنید یه دمو براتون گذاشتم که قشنگ بتونید یه تنی به کد بزنید.
خب من فعلا تو این پست قصد ندارم بگم که اصن اینکار کار درستیه یا نه ولی صرفا تجربه جالبیه چون هم توی این مسیر تونستین تجربه خوبی در استفاده از Context , useContext , useReducer ها بدست بیاورید.
و در آخر ممنون میشم که اگر این پست رو تا آخر خوندین نظر خودتون رو به عنوان خواننده بگید که من هم بتونم پیشرفت بیشتری توی نوشتن این مقالات بکنم.
