تو مقاله‌های قبلی استفاده از ریداکس رو با یک مثال خیلی ساده آموزش دادم. اما تو این مقاله می‌خوام در مورد ویژگی های ریداکس صحبت کنم. ویژگی های مثبتی که باعث شده ریداکس بیش از پیش محبوب بشه. تو این مقاله می‌خوام به این سوال جواب بدم که چرا ریداکس ؟
خوب قبل از اینکه بریم سراغ ریداکس باید در مورد state management ها تو اپلیکیشن هامون اطلاعاتی داشته باشیم. دیتایی از سمت سرور میاد و ما سمت کاربر ( کلاینت) اونها رو می‌گیریم و به شکل مناسب نمایش میدیم.
اکثر کامپوننت ها و المان هایی که تو صفحه نمایش وجود دارند صرفا وظیفه نمایش داده های دریافتی رو دارند و برخی کامپوننت ها هم هستند که وظیفه دریافت اطلاعات از کاربر رو دارن.
مثال ساده ای که باهاش ریداکس رو آموزش دادم در نظر بگیرید. تو اون مثال یک شمارنده خیلی ساده رو نوشتیم و بعد با استفاده از ریداکس اون رو reformat کردیم.
برای مطالعه مقاله آموزش ریداکس با مثال ساده :
خوب شمارنده ما state داخلی داره که باهاش مقدار شمارنده رو کنترل می‌کنه!
در ابتدا مقدار شمارنده صفر هست و بعد از هر عملی که انجام می‌گیره این مقدار کم یا زیاد میشه. خوب این کامپوننت داره کار می‌کنه (با استیت داخلی) ، پس بازم نیاز هست که از ریداکس استفاده کنیم ؟
این سوال رو در ادامه جواب میدم. البته مثل همیشه با طرح یک سری سوال ها و جواب ها
اگه این دوتا کامپوننت فرزند یک والد باشند باز یه مقداری کار ساده تر میشه و نهایتا با پاس دادن یه فانکشن و یک پراپس میشه مقدار شمارنده رو تو کامپوننت دیگه دید و ازش استفاده کرد.
خوب بعضی وقتا نمیشه به این شکل کامپوننت ها رو از طریق ارث بری از والد در کنار هم قرار داد و از این روش استفاده کرد. در این صورت چی ؟
هر دفعه که کاربر مقدار شمارنده رو کم یا زیاد می‌کنه درخواستی به سمت سرور فرستاده و مقدار شمارنده ارسال میشه. در این صورت اگر در صفحه دیگه‌ای مقدار این شمارنده رو لازم داشته باشیم، با ریکوئست زدن به سرور این مقدار رو به دست می‌آریم و استفاده می‌کنیم.
درواقع مشکلی حل نشد بلکه مشکل چند برابر شد. اگر مقاله آپیدت بدبینانه و خوش بینانه رو خونده باشید می‌دونید که این سناریو فقط روی کاغذ قشنگه و همه چی درست کار می‌کنه. تو دنیای واقعی به هر دلیلی ممکنه مشکلی برای سرور ، کلاینت ، اینترنت و ... پیش بیاد و کنترل اوضاع از دست ما خارج باشه.
به این شکل دقت کنید:
تو شکل سمت چپ ، کامپوننت با رنگ متفاوت می‌خواد مقداری رو به یک کامپوننت دیگه ارسال کنه . بدون ریداکس این کار واقعا سخت هست. مشکلاتی مثل کثیف کد نوشتن ، داینامیک نبودن کدهامون ، کاهش reusability کامپوننت هایی که نوشتیم و مهمتر از همه دیباگ کردن و کاهش شدید پرفورمنس برنامه ای که نوشتیم.
حالا شکل سمت راست رو در نظر بگیرید. یک جای واحدی به اسم استور وجود داره و همه کامپوننت ها با اون ارتباط دارن . دیگه لازم نیست props drilling انجام بدیم و هی پراپس هامون رو از یک کامپوننت به کامپوننت دیگه پاس بدیم.
بعله ، وقتی ارتباط بین کامپوننت ها به این شکل باشه قطعا performance برنامه بالاتر میره . دیگه کامپوننت های واسطه این بین مسئول عبور دادن پراپس ها نیستند و هر کامپوننت می‌تونه به شکل مجزا به store دسترسی داشته باشه. این یعنی افزایش کارایی برنامه.
فراموش نکنید که state داخلی یه کامپوننت می‌تونه وجود داشته باشه. وقتی که به مقدار یک کامپوننت در جای دیگه احتیاجی نداریم ( مثلا با کلیلک کردن روی یک دکمه رنگش عوض شه) می‌تونیم از state داخلی استفاده کنیم.
خیر، قطعا ریداکس دوستان دیگه هم داره ، context Api که تو خود react وجود داره یکی دیگه از روش های context management توی ری اکت هست.
هرچند گفتن کلمه رقیب در اینجا درست نیست. ریداکس کارایی مشخصی داره و در مقابل، context api هم برای منظور مشخصی ساخته شده. حتی در برخی موارد میشه از جفتش توی یک پروژه استفاده کرد.
ریداکس فوق العاده قدرتمند هست. کارایی فوق العاده بالا در کنار سادگی!
دفه اولی که می‌خواستم ریداکس رو یاد بگیرم دوستم بهم گفت ریداکس هیچی نیست جز ۶ خط کد ساده. تا اینکه شروع کردم یه مثال ساده ازش پیاده سازی کردم. همون مثالی که تو مقاله آموزش ریداکس برای شما هم زدم. بعد از اون تو چند تا پروژه کوچیک ازش استفاده کردم و به مرور دانشم رو بیشتر کردم. الان طوری شده که حتی برای پروژه های کوچیک هم از ریداکس استفاده می‌کنم.
سایر مقاله های من در ویرگول:
Contact With me:
https://t.me/nimamohamadian
https://www.facebook.com/nimamohamadian89
https://twitter.com/Nima_Mohamadian
https://www.linkedin.com/in/nima-mohamadian-57ba63123
