ریداکس ساگا

ریداکس همیشه کتابخونه محبوب من بوده و هست. این محبوبیت فقط به خاطر خود ریداکس نیست بلکه کتابخونه هایی که برای ریداکس نوشته شدن این قدرت و محبوبیت رو چند برابر میکنن. امروز در مورد یکی از این کتابخونه ها به اسم ریداکس ساگا redux saga میخوام صحبت کنم.


در صورتی که میخواهید ریداکس رو با انجام یک مثال ساده شروع کنید، شمارو به خوندن این مقاله توصیه میکنم:

https://virgool.io/iran-react-community/ریداکس-به-زبان-ساده-emxqh7w4gnpk




بذارین با یه سناریو خیلی ساده ریداکس ساگا رو توضیح بدم. تو داستان ما یک سایت یا یک اپ داریم به اسم ویرگولگرام (مثلا دیگه) و میخواهیم بعد اینکه کاربر یک مطلب رو لایک کرد یک عدد که مجموع تعداد لایک ها هستش رو بهش نمایش بدیم. میخواهیم با این سناریو میخواهیم ریداکس ساگا رو بررسی کنیم.

ریداکس ساگا
ریداکس ساگا


خوب حالا ریداکس ساگا چی هست؟‌

برای اینکه با ریداکس ساگا آشنا بشید باید با روند ارسال و دریافت ریکوئست از سمت فرانت به بک اند و برعکس رو بدونید. پس توصیه میکنم مقاله زیر رو بخونید:

https://virgool.io/@novonimo/آپدیت-بد-بینانه-و-خوش-بینانه-thzeoe7zmjmr


خوب تو این مقاله به ۲ روش موجود برای جریان داده های برنامه اشاره شد. خوب حالا میخواهیم کتابخونه ای رو معرفی کنیم که با استفاده ازش خیلی از کارها راحت تر و ساده تر انجام میشن.

فرض کنید که با روش آپدیت بدبینانه میخواهید فرآیندتون رو کنترل کنید. پیاده سازی این روش +‌ اضافه کردن فرآیند های لازم برای آپدیت ریداکس هم وقت زیادی میگیره و هم ممکنه خسته کننده به نظر برسه
شما برای هر اکشنی که با دیتابیس کار داره باید یک then بنویسید. و در هر قسمت کلی کد پیاده کنید تا به تونید به اصطلاح جلوی همه ساید افکت هارو بگیرید.

درصورتی که تو پروژه از ریداکس استفاده میکنید میتونید همه این ساید افکت هارو به ریداکس ساگا بسپارید و خودتون با خیال راحت بدون درگیری با روش های آپدیت بدبینانه و خوش بینانه مشغول توسعه بشید.

ریداکس ساگا دوست داشتنی
ریداکس ساگا دوست داشتنی


خوب اما واقعا ریداکس ساگا داره چیکار میکنه ؟‌

برای اینکه جواب این سوال رو بدونید لازم هست که در مورد اپدیت بدبینانه و خوش بینانه اطالاعات کافی داشته باشید.
ریداکس ساگا با استفاده از متدهای فراوونی که داره به شما کمک میکنه که از روش سومی استفاده کنید و درگیر چالش های آپدیت بدبینانه و خوش بینانه نشین.

ساگا با استفاده از یک سری تابع جنریتور و با استفاده از fetch و یا axios میتونه خیلی از کارهای مارو ساده کنه.

برای اینکه با ساگا بیشتر آشنا شید به عکس زیر دقت کنید:

جریان ریداکس ساگا
جریان ریداکس ساگا


خوب از سمت کاربر شروع کنیم به بررسی . مثلا کاربر روی دکمه لایک کلیک میکنه !
این عمل یک اکشنی رو فراخونی میکنه . این اکشن به جای اینکه به ریداکس مخابره (dispatch) شه به سمت ریداکس ساگا میره و اونجا عمل ریکوئست زدن به API مورد نظر اتفاق میوفته. ساگا به شما این میگه که بدون نگرانی از فرآیند ریکوئست زدن و جواب گرفتن به بقیه کارتون برسید. در صورتی که جواب ۲۰۰ از سمت سرور برای شما بیاد این یک اکشن مناسب با اون اتفاق میوفته و در صورتی که هر ریسپانس دیگه ای غیر از ۲۰۰ از سمت سرور به سمت شما بیاد اکشن خطا رو اجرا میکنه .

این اکشن های موفقیت و خطا به سمت ریداکس شما میرن و تو reducer شما کار مشخصی رو انجام میدن. در نهایت تغییر reducer موجب تغییر UI شما میشه.

در صورتی که مقاله آپدیت بدبینانه و خوش بینانه رو خونده باشید با چالش های احتمالی روبرو میشید . استفاده از ریداکس ساگا همه چالش های پیش روی شما رو از بین میبره !


خوب از مزایای زیاد ریداکس ساگا گفتیم اما بهتره که در مورد معایبش هم بگیم

من مدتی هست که دارم ازش استفاده میکنم و جز خوبی ازش چیزی ندیدم :دی

دفعه اولی که با سینتکس ساگا روبرو میشید کمی جا میخورید!
خیلی کم پیش میاد که ما توی جاواسکریپت به تابع generator نیاز داشته باشیم و منطق و اجرای ریداکس ساگا بر اساس توابع جنریتور هست .
این مشکل جای نگرانی نداره و با مطالعه جزئی ، حل میشه !

مشکل بعدی که باهاش روبرو هستید داکیومنت ضعیف ریداکس ساگا هست که برای یه تازه کار خیلی مفهوم به نظر نمیرسه !

تو مقاله های بعدی در مورد نصب ریداکس ساگا بر روی پروژه بیشتر توضیح میدم و سعی میکنم با یک مثال کاربردی نحوه پیاده سازی اون رو براتون شرح بدم.


سایر مقاله های من در ویرگول:

https://virgool.io/JavaScript8/معرفی-storybookjs-ub1k1h88bda6
https://virgool.io/JavaScript8/معرفی-flow-برای-جاواسکرپیت-ogssae9iaif4
https://virgool.io/@novonimo/مکمل-قردتمند-گیت-git-flow-ufhgxx6j6ah3




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