کتابخانه Redux چیست و چه مزایایی دارد؟



visibility  
mode_comment   ۱

Redux چیست : زبان جاوا اسکریپت در شروع کار خود، بیشتر به عنوان زبانی برای پویا کردن صفحات وب استفاده می‌شد. اما با گذشت زمان و توسعه فریم ورک های جدید، توانست راه خودش را به حوزه‌های مختلفی مانند ساخت اپلیکیشن موبایل، برنامه نویسی سمت سرور و بازی سازی باز کند. قدرت اصلی زبان جاوا اسکریپت برگرفته از این فریم ورک ها می باشد، فریم ورک هایی مانند Redux، vue یا React در رشد این زبان نقش مهمی داشتند. در این مطلب قصد داریم شما را با فریم ورک Redux آشنا کنیم تا بدانید ری داکس چیست و چه مزایای در برنامه نویسی دارد.

فریم ورک Redux چیست ؟

Redux یک کتابخانه جاواسکریپت است که برای ساخت رابط کاربری اپلیکیشن ها و صفحات وب استفاده می‌شود. این کتابخانه حالات (states) مختلف را در برنامه‌های جاوا اسکریپت مدیریت می‌کند. حالا منظور از state چیست؟ همانطور که می‌ دانید برنامه های کامپیوتری داده‌های خود را در متغیرها ذخیره می‌کنند که هر متغیر مقداری از فضا در حافظه کامپیوتر (RAM) را اشغال به خود اختصاص می دهد.  به محتوای آن بخش از حافظه، زمانی که نرم افزار در حال اجرا است، وضعیت برنامه نامیده می شود. با شناخت State می‌توانیم Redux را بهتر درک کنیم.

ریداکس یک الگو برای مدیریت بهتر و بهینه تر وضعیت های مختلف در برنامه ارائه می دهد. این کتابخانه سن زیادی ندارد و در سال 2015 عرضه شده است. از Redux بیشتر به عنوان یک مکمل در کنار کتابخانه‌هایی مانند Angular یا React استفاده می‌شود. این کتابخانه با تمام وابستگی‌های خود (Dependency) تنها 2 کیلوبایت حجم دارد و با بکارگیری آن، لازم نیست نگران سنگین شدن پروژه خود باشید. همچنین به خاطر متن باز بودن این پروژه، کدهای آن در گیت هاب موجود است و می‌توانید آن را مطالعه کنید.

کاربرد فریم ورک Redux چیست ؟

آشنایی با ریداکس فریم ورک

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

اگر با سایر فریم ورک‌های جاوا اسکریپت مانند React کار کرده باشید، می‌دانید که این فریم ورک ها خودشان قابلیتی دارند که به کمک آن می‌توانید حالات مختلف را در برنامه مدیریت کنید. توصیه می‌کنیم قبل از یادگیری Redux از همان سیستم‌ها استفاده کنید، چون به احتمال زیاد نیاز شما را برآورده می‌کند و می‌توانید برنامه خود به طور کامل پیاده‌سازی کنید. اما اگر برنامه شما پیچیده است و حین برنامه نویسی به سختی متوجه می‌شوید که حالات کجا ذخیره می‌شوند یا چطور تغییر می‌کنند، ریداکس بهترین کتابخانه موجود است که می‌توانید برای مدیریت States از آن استفاده کنید.

رابطه Flux با Redux چیست | این دو کتابخانه چگونه کار می‌کنند؟

مقایسه Redux با flux

Redux تا حد زیادی از مفهوم Flux که توسط Facebook ارائه شده تاثیر گرفته است. Flux از یک مدل سه بخشی با نام های action، stores و dispatcher تشکیل شده است. دقیقا مانند MVC که از Model، View و Controller استفاده می‌کند، این 3 بخش با هم در ارتباط هستند و کنار هم کار می‌کنند. در ادامه این مطلب نحوه کار Flux را با یک مثال بررسی می‌کنیم اما قبل از آن اگر نمی دانید MVC چیست و چگونه کار می کند، می‌توانید مطلب زیر را مطالعه کنید.

more  بیشتر بدانید : MVC چیست به زبان ساده

کار با ریداکس آسان است و تنها با شناخت و درک مفاهیمی مثل Middleware، Reducer یا store می‌توانید یادگیری این کتابخانه را شروع کنید. در واقع اگر قبلا تجربه کار با Flux را داشته باشید، هنگام یادگیری Redux حس می‌کنید به خانه خودتان برگشته‌اید. حتی اگر هیچ شناختی هم روی Flux نداشته باشید، باز هم کار با ریداکس آسان خواهد بود. بهتر است قبل از ادامه بحث با چند مفهوم کلی آشنا شویم.

اول بهتر است Action را بشناسیم. Action یک سیگنال است که اطلاعات و داده‌ها را به store منتقل می‌کند. بعد با مفهومی به نام Reducer کار داریم که نشان می‌دهد State های یک برنامه چطور با ارسال اطلاعات از Action به Store واکنش نشان می‌دهند. حالا Store را مثل یک شیء (Object) در نظر بگیرید که این دو را کنار هم قرار می‌دهد. با دانستن این موارد راحت تر می‌توانیم درباره فریم ورک Flux صحبت کنیم.

چرخه کار در Flux

تصویر بالا به خوبی نحوه کار این فریم ورک را نشان می‌دهد. اگر چرخه بالا را به خوبی درک کنید تا حد زیادی Flux را فهمیده‌اید. User Interface همان رابط کاربری برنامه ما است. اگر کاربر روی قسمت خاصی از صفحه کلیک کند، از User Interface یک action به Dispatcher ارسال می‌شود. شاید برایتان سوال پیش بیاید که چرا action ما مستقیم به Store فرستاده نمی‌شود. به این خاطر که Dispatcher مثل یک رابط عمل کرده و استفاده از آن مزایای زیادی به همراه دارد. Dispatcher را مانند یک فیلتر در نظر بگیرید که بررسی می‌کند درخواست‌های ارسال شده معبتر هستند یا خیر. حالا action ما وارد Stores شده و اطلاعات آنجا ذخیره می‌شوند. بعد از بروزرسانی Stateها تغییرات حاصل شده دوباره به سمت User Interface برمی‌گردد و کاربر تغییرات را در برنامه می‌بیند.

ریداکس هم شباهت زیادی با Flux دارد. مانند Flux ما با یک مدل سه بخشی طرف هستیم که action در هر دو فریم ورک مشترک است. یعنی داده‌ها از طریق Action منتقل می‌شوند. در Redux ما با یک store کار می‌کنیم پس s جمع از Stores حذف می‌شود. همینطور دیگر چیزی به اسم Dispatcher وجود ندارد و به جای آن از Reducer استفاده می‌کنیم. اینبار سناریو کمی تغییر می‌کند. تصویر زیر را مشاهده کنید:

چرخه کار در Redux

بعد از یک اتفاق مثلا کلیک کاربر روی صفحه، User Interface این کلیک را در قالب یک action به Middleware می‌فرستد. در مرحله بعد Middleware یک State جدید ساخته و آن را برای Store ارسال می‌کند. store هم با تغییر هر State دوباره آن را به User Interface برمی‌گرداند. این نکته را هم مد نظر داشته باشید که Flux یک ساختار است و ریداکس یک کتابخانه.

Redux با کدام زبان ها و فریم ورک ها سازگار است و مزایای استفاده از آن چیست؟

Redux برای ذخیره داده‌ها در لایه نمایش مورد استفاده قرار می‌گیرد. کاربرد اصلی ریداکس در کنار فریم ورک هایی مانند React و React Native است. اما می‌توان از آن در Angular، Angular2، Vue، Mithril و سایر کتابخانه های JS استفاده کرد چون ریداکس هیچ مشکلی در ادغام شدن با سایر فریم ورک ها ندارد. این فریم ورک با یک مکانیسم ساده به راحتی خودش را در کنار سایر زبان‌ها جا می‌دهد.

ریداکس خطایابی (Debug) برنامه را راحت می‌کند. به خاطر ساختار منظمی که دارد پیدا کردن باگ های نرم افزاری و تست نرم افزار داخل این کتابخانه راحت است. همینطور ریداکس این قابلیت را دارد که از سرور Render بگیرد. در این حالت باید state برنامه را به سرور ارسال کنید و سرور به آن پاسخ می‌دهد، سپس بخش های مورد نیاز به زبان HTML تبدیل می‌شوند و برای کاربر ارسال می‌شوند.

همچنین ریداکس گزینه بسیار خوبی برای استفاده در پروژه های بزرگ است، زیرا در پروژه‌های شناخته شده‌ای حضور داشته است. ریداکس در پروژه هایی مانند صفحه جدید ادمین وردپرس (سایت WordPress.com)، سایت توییتر در نسخه موبایل و همینطور دیباگر جدید مرورگر فایرفاکس مورد استفاده قرار گرفته است.

جمع بندی

در این مطلب بررسی کردیم که Redux چیست و چطور کار می‌کند. هر زمانی که احساس کردید React پاسخگوی نیازهای شما نیست و پروژه در حال بزرگتر شدن و پیچیده‌تر شدن است، ریداکس می‌تواند گره‌گشای کار باشد. البته این نکته را هم فراموش نکنید که ریداکس مناسب کاربران مبتدی نیست و بهتر است قبل از استفاده از آن جوانب مختلف را بررسی کنید. اگر در هنگام کار با این کتابخانه به مشکل خوردید یا سوالی برایتان پیش آمد، حتما با ما و سایر خوانندگان سون لرن در میان بگذارید.

متخصص اندروید
دوست داری از طریق برنامه نویسی کسب درآمد کنی؟ اگر می خوای با برنامه نویسی وب و موبایل کسب درآمد کنی، جایی استخدام شی و یا حتی اینکه درامد ارزی داشته باشی، حتما دوره های متخصص سون لرن رو یه نگاه بنداز : متخصص شو arrow_back
7Learn Experts
comment دیدگاه کاربران
حسین ملهم replyپاسخ

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

add_circle ارسال دیدگاه

خوشحال میشیم دیدگاه و یا تجربیات خودتون رو با ما در میون بذارید :