Multicast & Chill: شروع با RXJS – III

من اخیراً روبرو شدم مادی توسط مارتین دونات ، یک پروژه منبع باز فوق العاده با Over 22K ستاره Githubبشر

این یک سهم باورنکردنی در جامعه است و باعث می شود اسناد و مدارک میزبان بی دردسر باشند.

در حین کاوش در آن ، من در مورد چگونگی دستیابی به چنین پروژه بزرگ کنجکاو شدم واکنش پذیریبشر

پشته بیشتر است HTML ، SCSS ، PEACT ، RXJS و چند کارگر، و من این را به عنوان فرصتی مناسب برای شیرجه زدن به آن دیدم rxjs– به ویژه نحوه استفاده از آن رعایت و سایر الگوهای پیشرفته.

من دیروز مقاله ای را در مورد اپراتورها نوشتم ، آن را بررسی کنید:

یکی از ویژگی های قدرتمند و در عین حال که اغلب در RXJS اشتباه گرفته می شود موضوع وت چندتاییبشر

اگر با شما کار کرده اید رعایت، شما می دانید که آنها مقادیر مشترکان را منتشر می کنند ، اما موضوع با اجازه انتشار مستقیم مقادیر و به اشتراک گذاری داده ها در چندین مشترک ، این مسئله را به دست آورید.

بیایید شیرجه بزنیم!

بوها موضوع در RXJS اساساً قابل مشاهده است با ویژگی های اضافیبشر این به شما امکان می دهد:

• داده های جدید را منتشر کنید به مشترکان در هر زمان استفاده .next()بشر
• هم به عنوان یک مشاهده کننده و هم یک ناظر عمل کنید (می توانید در آن مشترک شوید و مقادیر را به آن فشار دهید).
• ارزش ها به چندین مشترک ، بر خلاف یک مشاهده منظم که داده ها را به صورت جداگانه در هر اشتراک ارسال می کند.

مثال: ایجاد و استفاده از یک موضوع

import { Subject } from 'rxjs';

const subject = new Subject();

// Subscribers
subject.subscribe(value => console.log(`Subscriber 1: ${value}`));
subject.subscribe(value => console.log(`Subscriber 2: ${value}`));

// Emit values
subject.next('Hello, RxJS!');
subject.next('Subjects are powerful!');

چگونه کار می کند:

1. دو مشترک به همان موضوع گوش می دهند.
2. وقتی تماس می گیریم .next()، هر دو مشترک ارزش را دریافت می کنند همزمانبشر
3. برخلاف مشاهدات استاندارد ، ما به یک تولید کننده جداگانه احتیاج نداریم –ما تولید گازهای گلخانه ای را مستقیماً کنترل می کنیمبشر

این باعث می شود سوژه ها برای جریان داده در زمان واقعی، مانند به روزرسانی های WebSocket ، تعامل کاربر یا مدیریت دولت مشترکبشر

Multicasting: جلوگیری از عوارض جانبی غیر ضروری

به طور پیش فرض ، مشاهدات ایجاد می کنند اعدام جدید برای هر اشتراک ، به این معنی که اگر چندین مشترک دارید ، منبع داده چندین بار اجرا می شود.

مثال: مشکل با مشترکان متعدد

import { Observable } from 'rxjs';

const observable = new Observable(subscriber => {
  console.log('New subscriber - fetching data...');
  subscriber.next(Math.random()); // Simulating an API call
});

observable.subscribe(value => console.log(`Subscriber 1: ${value}`));
observable.subscribe(value => console.log(`Subscriber 2: ${value}`));

خروجی:

New subscriber - fetching data...
Subscriber 1: 0.12345
New subscriber - fetching data...
Subscriber 2: 0.67890

هر اشتراک اجرای جدیدی را ایجاد می کند، منجر به تماس های اضافی API ، محاسبات یا شنوندگان رویداد می شود. اینجاست چندتایی وارد می شود

چیست .multicast()؟

.multicast() اپراتوری است که اجازه می دهد مشترکین متعدد برای به اشتراک گذاشتن یک اجرای واحد قابل مشاهده ، از تکرار غیر ضروری.

مثال: رویدادهای کلیک چندگانه

import { fromEvent, Subject } from 'rxjs';
import { tap, multicast } from 'rxjs/operators';

const clicks = fromEvent(document, 'click').pipe(
  tap(() => console.log('Click event triggered')), // Side effect
  multicast(() => new Subject())
);

const subscription = clicks.connect();

clicks.subscribe(() => console.log('Subscriber 1 received click event'));
clicks.subscribe(() => console.log('Subscriber 2 received click event'));

چرا این کار بهتر است:

• به جای ورود به سیستم "Click event triggered" دو بار در هر کلیک ، آن فقط یک بار اجرا می شودبشر
• هر دو مشترک دریافت می کنند داده های مشابهبشر
• .connect() تضمین می کند که اعدام مشترک بلافاصله شروع می شود.

سوژه ها در مقابل Multicasting: چه موقع از چه چیزی استفاده کنیم؟

• از افراد استفاده کنید وقتی به منبع داده کنترل شده دستی (به عنوان مثال ، پیام های WebSocket ، اقدامات کاربر).
• از multicasting استفاده کنید وقتی منبع (مانند یک API یا شنونده رویداد) اما مشترکان متعدد.

پیچیدن

افراد و چند مرحله ای ابزارهای قدرتمندی در RXJ ها هستند که امکان اشتراک گذاری داده های کارآمد را فراهم می کنند.

آیا شما نیاز دارید انتشار داده در زمان واقعی با موضوع یا بهینه سازی اجرای با چندتایی، این مفاهیم برنامه نویسی واکنشی را ایجاد می کنند کارآمدتربشر

من یادگیری های بیشتری را به اشتراک می گذارم ، بنابراین به اطراف خود بچسبید/دنبال کنید تا شیرجه های عمیق تر را به RXJS و فراتر از آن دنبال کنید! 🚀

در حین کاوش در اجرای MKDOCS-Material ، من یاد گرفته ام که چگونه این تکنیک ها را برای LiveApi تطبیق دهم ، محصولی که من مدتی با اشتیاق در آن کار کرده ام.

با LiveApi ، می توانید به سرعت مستندات API تعاملی را تولید کنید که به کاربران امکان می دهد API ها را مستقیماً از مرورگر اجرا کنند.

اگر از ایجاد دستی برای API های خود خسته شده اید ، این ابزار ممکن است زندگی شما را آسانتر کند.