کاربردهای redux چیست؟

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

اگر برنامه ای پیچیده دارید و در زمان برنامه نویسی به سختی می توانید بفهمید که حالات کجا ذخیره می شوند و چطور تغییر می کنند فریم ورک redux بهترین گزینه  برای مدیریت states می باشد.

کارکرد redux به چه صورت است؟

کارکرد reduxطریقه ی کارکردن redux خیلی راحت است به طوری که یک مخزن مرکزی برای تمامی حالات یا همان states یک اپلیکیشن را در خود ذخیره می کند و هریک از کامپوننت ها بدون اینکه به ارسال props نیاز داشته باشند می توانند به states های ذخیره شده دسترسی پیدا کنند.

فریم ورک redux از سه بخش تشکیل شده است و با هم در ارتباط هستند درکنار یکدیگر کار می کنند که این سه بخش شامل موارد زیر می باشد:

1. 1. Actions: سیگنالی است که اطلاعات و داده ها به Store منتقل می کند
2. reducers: نشان می دهد states های یک برنامه چگونه با ارسال اطلاعات از  Actions به Store واکنش نشان می دهد.
3. Store: Store اگر یک شی در نظر گرفته بگیریم، Actions و reducers در کنار هم قرار می دهد.

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

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

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

اول بهتر است Action را بشناسیم. Action یک سیگنال است که اطلاعات و داده‌ها را به store منتقل می‌کند. بعد با مفهومی به نام Reducer کار داریم که نشان می‌دهد State‌های یک برنامه چطور با ارسال اطلاعات از Action به Store واکنش نشان می‌دهند. حالا Store را مثل یک شیء (Object) در نظر بگیرید که این دو را کنار هم قرار می‌دهد. با دانستن این موارد راحت‌تر می‌توانیم درباره فریم ورک 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 استفاده می‌کنیم. اینبار سناریو کمی تغییر می‌کند. تصویر زیر را مشاهده کنید:

بعد از یک اتفاق مثلا کلیک کاربر روی صفحه، 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)، سایت توییتر در نسخه موبایل و همینطور دیباگر جدید مرورگر فایرفاکس مورد استفاده قرار گرفته است.