redux چیست و استفاده از آن چه مزایایی دارد؟

کتابخانه Redux یک کتابخانه جاوا اسکریپت متن باز همراه با یک API ساده و محدود برای مدیریت وضعیت برنامه‌ها است که معمولا همراه با کتابخانه‌های React یا Angular برای ایجاد رابط کاربری استفاده می‌شود.

محبوبیت زبان برنامه‌ نویسی JavaScript روز به‌ روز در حال افزایش است و ابزارها و فریم ورک‌های فراوانی برای آن وجود دارند. این زبان برنامه‌ نویسی، امروزه به محبوب‌ترین زبان برنامه‌ نویسی حال حاضر دنیا تبدیل شده است و به نظر نمی‌رسد که این محبوبیت در حال کاهش باشد. از میان ابزارهای قدرتمند و جذابی که برای جاوا اسکریپت ارائه شده‌اند، یکی از جالب‌ترین آن‌ها، کتابخانه کاربردی Redux است که برای مدیریت وضعیت برنامه‌ها از آن استفاده می‌شود. ریداکس سازگاری خوبی با کتابخانه‌های محبوبی مانند React.js  و Angular داشته و این موضوع عامل موفقیت آن در مدت‌ زمان کوتاه بوده است. این کتابخانه متن‌ باز بوده و دارای API قدرتمند و در عین‌حال ساده است. در این مقاله کوتاه از لیداوب، قصد داریم تا شما را با ویژگی‌ها و مزایای استفاده از ریداکس بیشتر آشنا کنیم.

Redux (ریداکس) چیست ؟

redux یک الگوی الهام گرفته از معماری flux فیسبوک می‌باشد، بنابراین برای فهم redux بهتر است ابتدا flux رو به شما معرفی کنیم تا نحوه به وجود آمدن redux و تفاوت آن با flux برای شما مشخص شود.

flux چیست و روش کار آن به چه شکل است ؟

flux به نوعی یک باز سازی از ایده‌های قبلی mvc ،‌mvvm و twoway data binding است که یک جریان جدید در فرانت اند به نام undirectional data flow را معرفی می‌کند و از سه بخش اصلی stores ,dispatcher و action تشکیل شده است.

 

undirectional data flow الگویی است که در آن جریان تبدیل model به view یکطرفه است و چون جریان داده یک طرفه است، همیشه مشخص می‌شود که داده از کجا آمده و تبدیل به چه چیزی شده است.

 

با توجه به شکل زیر روش کار flux به شرح زیر می‌باشد؛

1. در ابتدا مجموعه‌ای از store‌ها به action‌ها منتقل می‌شود.
2. بعد از اینکه یک action در UI اتفاق میافتد به dispatcher اطلاع داده می‌شود.
3. dispatcher به store‌های منتقل شده اطلاع رسانی می‌کند تا آن‌ها بروز رسانی شوند.
4. state مربوط به هر store‌ها با توجه به action بروز رسانی می‌شود.
5. در انتها UI هم با توجه به state‌های جدید بروز رسانی می شود.

مثلا وقتی کاربر در جایی کلیک می‌کند، یک action برای dispatcher ارسال می‌شود تا آن به store‌های منتقل شده اطلاع رسانی کند، و آن‌ها هم state خود را بروز رسانی کنند و سپس UI براساس state‌های جدید بروز رسانی می‌شود.

روش کار redux (ریداکس)

از آنجایی که redux نشات گرفته از flux است، تفاوت و شباهت‌هایی باهم دارند، مثلا redux فقط از یک store تنها استفاده می‌کند و action‌ها مستقیما توسط store مدیریت می‌شوند پس دیگر نیازی به dispatcher ندارند و مفهومی به نام reducer جایگزین آن شده است و همچنین middleware که می‌تواند action‌ها را حذف و اضافه کند یا تغییری در آن‌ها ایجاد کند.

روش کار redux به شرح زیر می‌باشد:

1. وقتی  یک action در UI اتفاق می‌افتد، reducer براساس action و state جاری که برای آن فرستاده می‌شود یک state جدید می‌سازد و آن را به store منتقل می‌کند.
2. به محض اینکه یک action باعث تغییر یک state شود و state جدید توسط reducer ساخته شود، store به کسانی که باید از این state مطلع شوند اطلاع رسانی می‌کند.

چرا باید از redux (ریداکس) استفاده کنیم ؟

ریداکس به برنامه‌ نویس این امکان را می‌دهد که رفتار برنامه خود را در محیط‌های مختلف بیازماید و نظارت کند. از سوی دیگر، امکان اشکال‌ زدایی در حین اجرا نیز به شکل کدهای Live و پویا در آن تعبیه شده است. معمولاً لازم است که اگر در برنامه‌های خود از React و یا Angular استفاده می‌کنید، حتماً پوشش Redux را نیز به برنامه خود بیفزایید تا کنترل بهتری روی روند اجرای کدها داشته باشید.

قابلیت دیگری که می‌توان به آن اشاره کرد، امکان مدیریت و سازمان‌دهی دقیق برنامه است که یک ویژگی بسیار عالی محسوب می‌شود. با این حال، شما می‌توانید داده‌های خود را با یک برنامه‌ریزی مشخص در طول زمان تغییر دهید و به‌ روز نمایید. علاوه بر این موارد، ریداکس بیشتر در توسعه بک اند و سمت سرور مورد استفاده قرار می‌گیرد و کتابخانه‌ای است که امکان مدیریت زیادی را در این سمت ایجاد می‌کند. شاید فکر کنید که باید برای دانلود و نصب آن زمان زیادی را اختصاص دهید، اما تمامی این مراحل تنها نیاز به حدود 3 کیلوبایت دانلود و نصب چند ثانیه‌ای دارد.

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

 

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

 

سه اصل مهم در redux

Single source of truth: تمام stateها داخل یک object کامپوزیشن (درختی) به نام store ذخیره می‌شوند
State is read-only: تنها راه تغییر state این است که یک action را dispatch کنیم،  این کار برای این است که داده‌ها هرگز mutate نشوند و برای این کار باید از reducer استفاده شود.
Changes are made with pure functions: در واقع reducer‌ها، pure function‌هایی هستند که state فعلی و یک action را دریافت می‌کنند و بدون تغییر روی state فعلی یک state جدید برمیگردانند.

کتابخانه آنلاین لیداوب را جهت مطالعه بهترین و جدیدترین مقالات برنامه نویسی و طراحی سایت دنبال کنید.