معماری flux چیست؟
زبان جاوا اسکریپت، دارای کتابخانه های مختلفی همچون react، Redux می باشد. هر کدام از این کتابخانه ها از معماری یا قانون مخصوص خود پیروی می کنند. یکی از این معماری ها، معماری flux می باشد که کتابخانه Redux از آن استفاده و پشتیبانی می کند. به شما پیشنهاد می دهیم برای شناخت بهتر معماری flux این مقاله را مطالعه کرده و تا انتها با همراه ما باشید.
Flux چیست؟
Flux یک معماری و الگو می باشد که برای مدیریت داده ها و نحوه جریان یافتن آن ها مورد استفاده قرار می گیرد. زمانی که در React می خواهید یک کامپوننت والد را به کامپوننت فرزند منتقل دهید، می توانید از الگوی Flux استفاده نمایید. علاوه بر این می توانید از این الگو برای مدیریت داده ها نیز استفاده نمایید.
سه بخش معماری Flux برای مدیریت داده ها
- dispacher
- Store
- View (کامپوننت های برنامه )
در معماری Flux یک منبع قابل اعتماد به نام Store وجود دارد که در زمان ایجاد action ها، بروزرسانی می شود. لازم است بگوییم که action ها در فراخوانی dispacher ها مورد استفاده قرار می گیرند. زمانی که یک dispatcher ایجاد شد و به وسیله Store بروزرسانی شد، رویداد تغییر (change) را ایجاد می کند و در نهایت View ها نمایش داده می شوند.
چگونه پیاده سازی سفارشی از flux انجام دهیم؟
همانطور که می توانید از Flux، برای سفارشی سازی استفاده نمایید، کتابخانه های دیگری نیز وجود دارد که می توانید از آن ها استفاده کنید. می توانیم این کتابخانه ها را به صورت زیر معرفی نماییم.
- Facebook Flux
- alt
- nuclear-js
- Fluxible
- reflux
- Fluxxor
- flux-react
تمام کتابخانه هایی که در بالا نام بردیم، دارای ویژگی های مختلفی و کاربرد خود را دارند. در بین این کتابخانه ها، گروه یا جامعه react در پروژه های بزرگتر مورد استفاده قرار می گیرند که بیشتر بر روی ابزار Redux تمرکز دارند.
Flux چگونه کار می کند؟
 |
روش کار Flux به صورت زیر می باشد.
- در ابتدا مجموعه ای از store ها به action ها اضافه می شوند.
- بعد از اینکه یک action در ui اتفاق می افتد به dispatcher اطلاع داده می شود.
- dispatcher به store های subscribe شده اطلاع رسانی می کند تا خود را بروز رسانی کنند.
- state مربوط به هر store ها با توجه به action بروزرسانی می شود.
- در انتها ui هم با توجه به state های جدید بروزرسانی می شود.
Redux چیست؟
Redux به عنوان یکی از مهم ترین کتابخانه های جاوا اسکریپت به حساب می آید که از الگوی Flux در طراحی این کتابخانه استفاده شده است. کتابخانه Redux برای بروزرسانی داده ها از یک سری اصول یکسان استفاده می کند.
Redux سه قانون اصلی دارد:
- بروزرسانی ها توسط توابع خالص انجام شوند (در reducer ها)
- state یک پروپرتی خواندنی است
- state یک منبع قابل اعتماد است (تنها یک store در یک برنامه Redux وجود دارد)
سه اصل مهم در redux
Single source of truth
در این اصل، تمام state ها داخل یک object کامپوزیشن (درختی) به نام store ذخیره می شوند.
State is read-only
شما به وسیله این اصل می توانید، یک action را به dispatch تبدیل نمایید تا state تغییر کند. دلیل انجام این کار این است که داده ها mutate نشوند و باید برای این کار از reducer استفاده نمایید.
Changes are made with pure functions
به reducer ها، pure function نیز گفته می شود که پس از دریافت state فعلی و یک action، بدون تغییر دادن state فعلی یک state جدید ایجاد می کند.
دلیل استفاده از redux
دلایل بسیاری برای استفاده از redux وجود دارد که در این قسمت به معرفی آن ها می پردازیم.
- نظارت و مدیریت رفتار برنامه خود در محیط های مختلف
- اشکال زدایی در حین اجرا به شکل کدهای Live و پویا
- امکان مدیریت و سازمان دهی دقیق برنامه
- تغییر داده های خود با یک برنامه ریزی دقیق درطول زمان
- استفاده از ریداکس در توسعه بک اند و سمت سرور
- یک کتابخانه کوچک با حجم کم و نصب آسان می باشد
- سریع و کاربردی بودن
- داشتن نمونه کدهای آماده
- پشتیبانی و سازگاری با معماری قدرتمند MVC
- ایجاد و مدیریت ساده و سریع داده های با ترکیب React و Angular
روش کار redux
- زمانی که action در UI ایجاد می شود، reducer براساس action و state جاری یک state جدید ایجاد می کند و آن را store ذخیره می کند.
- پس از اینکه یک action در یک state تغییر ایجاد کرد و state جدید توسط reducer ایجاد شد،store به طراحان اطلاع رسانی می کند.
انواع توابع ریداکس
- توابع خالص
- توابع ناخالص
کاربرد ریداکس
- برطرف کردن مشکلات به وجود آمده در پروژه
- مدیریت پروژه و حالات برنامه
- پیاده سازی کامل برنامه
- استفاده از مدیریت States برای مشخص کردن محل و نحوه ذخیره سازی پروژه های پیچیده
- اطلاعاتی که کاربر مشاهده می کند ( data )
- اطلاعاتی که از کاربر دریافت می کنیم
- URL هایی که به کاربر نمایش می دهیم
- آیتم هایی که داخل صفحه نمایش داده شده اند
- خطاهایی که اپلیکشن می دهد
- در اختیار گذاشتن امکاناتی همچون Debugging ، action Replying و … به طراحان
- راحت کردن خطایابی (Debug) برنامه
تفاوت های Redux و Flux
می توانیم تفاوت های Redux و Flux را به صورت زیر بیان کنیم.
| Redux | Flux |
| استفاده کردن از dispatcher | استفاده نکردن از dispatcher |
| استفاده از توابع خالص | |
| استفاده از Store و action ها |
می توانیم بزرگترین تفاوت بین Redux و Flux را مفهوم middleware بیان کنیم. شما به وسیله middleware می توانید، یک action را دریافت و آن را دستکاری نمایید. علاوه بر آن از این مفهوم می توانید در برنامه خود نیز استفاده کنید و فراموش نکنید که مفهوم middleware توسط کتابخانه Redux تواید و معرفی شده است
کتابخانه React
در سال 2012 کتابخانه React که مخصوص زبان جاوا اسکریپت می باشد طراحی شد. این کتابخانه برای ایجاد رابط کاربر (UI) مورد استفاده قرار می گیرد و به صورت رایگان در اختیار طراحان قرار می گیرد. این کتابخانه به عنوان یک روش ساده برای ساختن فرانتاند و طرحبندی وب به حساب می آید. زمانی که از این کتابخانه استفاده می کنید و اطلاعات وب شما به سادگی به نمایش در می آیند.
jsx چیست؟
 |
در این مقاله که در مورد flux صحبت می شود بهتر است در مورد jsx نیز صحبت شود. jsx یک فرمت جاوا اسکریپت می باشد و از آن برای ایجاد DOM های HTML در قالب یک کامپوننت استفاده می شود. برای شناخت بهتر به مثال زیر توجه نمایید.
| ; <const Hello =<p1> Hello world </p1 |
در مثال بالا یک هدینگ به نام hello world ایجاد کرده ایم و آن را در متغیر Hello قرار داده ایم. فراموش نکنید که jsx به کد های جاوا اسکریپت تبدیل می شود و یک شیء از جنس جاوا اسکریپتی خروجی آن می شود. به مثال بعدی توجه نمایید.
| <const hello = <p2 className = “IRC”> Hello World </p2 |
خروجی کد بالا در جاوا اسکریپت
|
} const hello = React.createElement ,”type: “p2 } :props ,”className: “IRC “children: “Hello World { { |
سخن پایانیهمانطور که می دانید، جاوا اسکریپت یکی از زبان های برنامه نویسی می باشد که برای پویا سازی صفحات وب مورد استفاده قرار می گیرد. این زبان از قسمت هایی همچون کتابخانه React، کتابخانه Redux، معماری flux و … تشکیل شده است. یکی از ملزومات استفاده از کتابخانه های React و Redux، شناخت معماری flux می باشد. در این مقاله، به معرفی معماری flux و نکات کاربردی آن پرداخته شده است و باعث شناخت و درک بهتر شما می شود. برای دریافت پاسخ سوالات خود و بهره مند شدن از تجربه اساتید خبره و دیگر دوستانتان در کمپین آموزشی بی لرن می توانید سوالات خود را در کافه گپ و گفت مطرح نمایید و در سریعترین زمان، پاسخ سوال خود را دریافت نمایید. همچنین می توانید با عضویت در کمپین آموزشی بی لرن، از دوره های آموزشی رایگان و کاربردی در زمینه های مختلف به صورت تخصصی و حرفه ای بهره مند شوید. با توجه به مسیر یادگیری در زمینه های مختلف می توانید برای شروع طراحی سایت و برنامه نویسی از آموزش html و css بهره مند شوید. |
دیدگاهتان را بنویسید