العودة إلى الدورة

BehaviorSubject و ReplaySubject

مطور Angular الشامل: من الصفر إلى الاحتراف

59. BehaviorSubject و ReplaySubject

تُعد هذه الـ Subjects المتخصصة ضرورية لإدارة الحالة في الخدمات لأنها تسمح للمشتركين الجدد بتلقي قيمة سابقة على الفور.

1. BehaviorSubject<T> (الحالة الحالية)

يتطلب BehaviorSubject قيمة أولية عند الإنشاء. عندما ينضم مشترك جديد، فإنه يتلقى على الفور آخر قيمة تم إطلاقها قبل تلقي أي إطلاقات مستقبلية.

حالة الاستخدام: تتبع حالة المستخدم الحالية، أو محتويات سلة التسوق، أو تهيئة التطبيق (حيث يحتاج كل مشترك إلى معرفة الحالة الحالية على الفور).

typescript import { BehaviorSubject } from 'rxjs';

const theme$ = new BehaviorSubject('light');

// يتلقى المشترك A 'light' على الفور theme$.subscribe(theme => console.log('A:', theme));

theme$.next('dark'); // يحصل جميع المشتركين على 'dark'

// يشترك المشترك B لاحقاً theme$.subscribe(theme => console.log('B:', theme)); // يتلقى B على الفور 'dark'

theme$.next('system'); /* تسلسل الإخراج (بعد الإنشاء): A: light, A: dark, B: dark, A: system, B: system */

// يمكننا قراءة القيمة الحالية بشكل متزامن دون الاشتراك console.log(theme$.value); // 'system'

2. ReplaySubject<T> (السجل/التاريخ)

يسجل ReplaySubject عدداً محدداً من القيم المُطلَقة ويعيد تشغيلها لأي مشترك جديد.

حالة الاستخدام: تسجيل الأخطاء (إذا نقر المستخدم على زر، قد ترغب في رؤية آخر 5 سجلات حدثت قبل النقر مباشرة).

typescript import { ReplaySubject } from 'rxjs';

// إعادة تشغيل آخر قيمتين const notification$ = new ReplaySubject(2);

notification$.next('A'); notification$.next('B'); notification$.next('C'); // يتم إسقاط 'A' من السجل

// ينضم مشترك D جديد notification$.subscribe(msg => console.log('D received:', msg)); // الإخراج: D received: B, D received: C