معماری flux در react

یکی از کتابخانه های بسیار محبوب جاوااسکریپت، react است که در سال 2011 توسط توسعه دهندگان کمپانی فیسبوک ساخته شد. اساس کار این کتابخونه، تقسیم بخش های مختلف وب سایت به بخش های کوچکی به نام کامپوننت است. برای رد و بدل کردن داده ها بین این کامپوننت ها از props استفاده می کنیم ولی با بزرگ شدن وب سایت و افزایش تعداد کامپوننت، رد و بدل کردن داده ها بین کامپوننت ها با استفاده از props ها، روش درستی به نظر نمی رسد. تصویر زیر بهتر این مسئله رو نشون میده. در گراف سمت چپ می بینیم که هر کامپوننت برای خودش یه سری داده داره و اونا رو با کامپوننت های دیگه می خواد به اشتراک بگذاره که این باعث بی نظمی میشه و مدیریت داده ها خیلی سخت میشه ولی در گراف سمت چپ می بینیم که داده ها داخل حافظه ای به نام store ذخیره شده و همه کامپوننت ها می تونن با این store ارتباط بگیرن و این کمک زیادی به ایجاد نظم و مدیریت داده ها می شه.

مقایسه مدیریت داده با استفاده از props و redux

کمپانی فیسبوک برای حل مشکل مدیریت داده ها، معماری flux رو به وجود آورد که در ادامه به بررسی این معماری می پردازیم.

معماری flux چیست؟

این معماری از الگوی جریان داده یک طرفه برای مدیریت state ها استفاده می کند. جریان داده یک طرفه یعنی داده ها تنها در یک مسیر جریان پیدا می کنند؛ یعنی داده ها همواره از کامپوننت والد به کامپوننت فرزند منتقل می شوند و کامپوننت های فرزند تنها می تونن از داده هایی که از کامپوننت والد می آید استفاده کنن ولی نمی تونن به صورت مستقیم تغییری در این داده ها اعمال کنن.

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

در معماری flux چهار لایه مهم داریم:

1- لایه View: منظور از View همون کامپوننت های ما هستند که کاربر با این بخش تعامل دارد. مثلا کاربر میاد روی یه دکمه کلیک می کنه و لیستی از داده ها رو می بینه. حال سوال مهم اینه که چه فرایندی طی شده تا کاربر تونست با موفقیت لیست داده ها رو ببینه. با کلیک کاربر روی دکمه مورد نظر یک action توسط dispatcher به
store ها فرستاده می شه و store مرتبط با اون action ، داده مورد نیاز برای نمایش رو به سمت لایه view ارسال می کنه

2- لایه Action: منظور از action همان object جاوااسکریپت است که معمولا شامل یک یا دو تا property هستش. برای مثال آبجکت زیر می تواند یک action باشد.

یا مثلا آبجکت زیر کمک می کنه یک داده با ID شماره 1 رو از داخل store حذف کنیم.

وجود actionType الزامی است چون کمک می کنه که به درستی بتونیم با store ارتباط بگیریم و عملیات مورد نظرمون رو روی داده اعمال کنیم.

3- لایه Dispatcher: معنی لغوی dispatcher یعنی ارسال کننده (ساطع کننده). در عمل هم dispatcher همین کار رو می کنه. dispatcher تابعی هستش که به عنوان ورودی action رو میگیره و اونو به store ها dispatch می کنه یا به زبان ساده ارسال می کنه.

4- لایه Stores: در این لایه store ها به dispatcher ها گوش میدهند و اگر action که dispatcher ها ساطع می کنن برای آن ها قابل استفاده باشد اون action رو میگیرند و متناسب با اون action عملیاتی روی داده های ذخیره شده روی اون store اعمال می کنن. نکته ای که باید بهش توجه کنید این که کامپوننت ها به تغییراتی که در داخل store ها اتفاق می افته گوش میدهند و اگر از داده ای استفاده می کنن که در حال حاضر دچار تغییر شده، متناسب با اون تغییر، کامپوننت استفاده کننده از آن، آپدیت می شود.

کتابخانه redux چیست؟

همانطور که گفتیم flux یه نوع معماری یا طرز فکر هستش که هر کسی می تونه این معماری رو یاد بگیره و متناسب با نیازش ازش استفاده کنه. افراد و کمپانی مختلفی در سراسر دنیا از این معماری استفاده کردند و کتابخانه ها و فریم ورک های متنوعی رو ساختند یکی از بهترین کتابخانه هایی که بر پایه معماری flux ساخته شده است، کتابخانه redux هستش.

در این مقاله قصد نداریم به تشریح کتابخانه redux بپردازیم. در ادامه به مقایسه redux و flux می پردازیم.

1- تفاوت store در flux و redux:

در flux ما می تونیم چندین store داشته باشیم ولی در redux به صورت پیشفرض یک store داریم البته اگر بخوایم می تونیم در redux هم چندین store داشته باشیم

2- تفاوت state در flux و redux:

در flux، داده (state) قابل تغییر (mutable) است ولی در redux داده (state) غیر قابل تغییر (immutable) است. همچنین وجود تاریخچه ای از state ها در داخل redux سبب می شود انجام عملیاتی مثل undo و redo رو ساده تر می کند

3- تفاوت action در flux و redux:

در flux، اکشن ها object هستند ولی در redux به لطف وجود middleware ها، action ها می تونن تابع یا promise باشند که می تونیم از این قابلیت استفاده کنیم و داخل action با سرور ارتباط بگیریم و عملیات asynchronous انجام دهیم

4- تفاوت dispatcher و reducer در flux و redux:

در flux ارسال action ها به store ها توسط dispatcher انجام می شود. در flux فقط یک dispatcher داریم.

در redux چیزی به اسم dispatcher نداریم ولی در داخل خود store توابع خالصی (pure functions) وجود دارند که وظیفه مدیریت state ها رو انجام میدهند. به این توابع میگیم reducer. این reducer ها، state فعلی و action رو به عنوان ورودی میگیرند و خروجی یه state جدید ایجاد می کنن