Angular-এ Observables, Operators, এবং Subjects খুবই গুরুত্বপূর্ণ। এগুলি RxJS (Reactive Extensions for JavaScript) লাইব্রেরি থেকে আসে, যা Angular-এ রিএ্যাক্টিভ প্রোগ্রামিং এবং ডাটা স্ট্রীম হ্যান্ডলিং এর জন্য ব্যবহৃত হয়। এর মাধ্যমে অ্যাসিনক্রোনাস ডাটা স্ট্রীম (যেমন HTTP রিকোয়েস্ট, ইউজার ইন্টারঅ্যাকশন, ইভেন্টস) খুবই সহজে ম্যানেজ করা সম্ভব।
Observables হলো এমন একধরনের ডাটা স্ট্রীম যা অ্যাসিনক্রোনাসভাবে ডেটা সরবরাহ করে। এটি ব্যবহার করে আমরা স্ট্রীমিং ডেটার সাথে ইন্টারঅ্যাক্ট করতে পারি এবং প্রয়োজনীয় ডেটা গ্রহণ, পরিবর্তন বা অপারেশন করতে পারি।
Observables প্রাথমিকভাবে Angular-এ HTTP রিকোয়েস্ট, ইউজার ইন্টারঅ্যাকশন, বা টাইমারগুলোর মাধ্যমে ডেটা রিসিভ করতে ব্যবহৃত হয়।
import { Observable } from 'rxjs';
// একটি সিম্পল Observable তৈরি
const observable = new Observable(subscriber => {
subscriber.next('Hello');
subscriber.next('World');
subscriber.complete();
});
observable.subscribe({
next(value) { console.log(value); },
complete() { console.log('Complete!'); }
});
এখানে, observable
একটি স্ট্রীম তৈরি করে যেটি দুইটি next
ইভেন্ট পাঠাবে এবং তারপর complete
কল করবে।
Operators হলো RxJS এর ফাংশন যা Observable এর উপরে বিভিন্ন ধরনের অপারেশন সম্পাদন করে। অপারেটরগুলো map, filter, mergeMap, switchMap ইত্যাদি হিসেবে উপলব্ধ থাকে। এগুলোর মাধ্যমে আপনি Observable এর মান পরিবর্তন, ফিল্টার, এবং অন্যান্য নানা অপারেশন করতে পারেন।
map: Observable এর প্রতিটি মানে একটি ট্রান্সফরমেশন বা পরিবর্তন আনতে ব্যবহৃত হয়।
উদাহরণ:
import { map } from 'rxjs/operators';
observable.pipe(
map(value => value.toUpperCase())
).subscribe(value => console.log(value));
এখানে, map
অপারেটরটি Observable থেকে পাওয়া মানগুলোর প্রতিটি ভ্যালু uppercase-এ পরিবর্তন করবে।
filter: Observable থেকে কিছু নির্দিষ্ট শর্তে মান ফিল্টার করতে ব্যবহৃত হয়।
উদাহরণ:
import { filter } from 'rxjs/operators';
observable.pipe(
filter(value => value === 'Hello')
).subscribe(value => console.log(value));
এখানে, filter
অপারেটরটি শুধুমাত্র 'Hello'
ভ্যালু এলিমেন্টকে গ্রহণ করবে এবং অন্য সবকে বাদ দিবে।
switchMap: একটি নতুন Observable স্ট্রীম তৈরির জন্য ব্যবহৃত হয় এবং পুরানো Observable কে অবহেলা করে নতুন Observable থেকে ডেটা নেয়।
উদাহরণ:
import { switchMap } from 'rxjs/operators';
observable.pipe(
switchMap(value => {
return new Observable(subscriber => {
subscriber.next(`${value} switched!`);
subscriber.complete();
});
})
).subscribe(value => console.log(value));
mergeMap: এটি একটি Observable থেকে আরেকটি Observable তৈরি করে এবং সমস্ত Observable থেকে আসা ভ্যালু মার্জ করে।
উদাহরণ:
import { mergeMap } from 'rxjs/operators';
observable.pipe(
mergeMap(value => {
return new Observable(subscriber => {
subscriber.next(`${value} merged!`);
subscriber.complete();
});
})
).subscribe(value => console.log(value));
Subjects হল একটি বিশেষ ধরনের Observable যা Observer এবং Observable উভয়ের মতো আচরণ করে। এটি একাধিক সাবস্ক্রাইবারকে একই ডাটা সরবরাহ করতে পারে এবং একাধিক সাবস্ক্রাইবারকে ডেটা পাঠানোর ক্ষমতা রাখে।
এটি সাধারণত যখন একাধিক কনজিউমারকে একই ডাটা শেয়ার করতে হয় তখন ব্যবহার করা হয়। সাধারণভাবে তিনটি ধরনের Subjects রয়েছে:
Subject
:import { Subject } from 'rxjs';
const subject = new Subject();
// Subscriber 1
subject.subscribe(value => {
console.log(`Subscriber 1: ${value}`);
});
// Subscriber 2
subject.subscribe(value => {
console.log(`Subscriber 2: ${value}`);
});
// Emit values
subject.next('Hello');
subject.next('World');
এখানে, Subject
দুটি সাবস্ক্রাইবারকে একই ডেটা পাঠাচ্ছে। দুজনেই "Hello"
এবং "World"
দেখবে।
import { BehaviorSubject } from 'rxjs';
const behaviorSubject = new BehaviorSubject('Initial Value');
behaviorSubject.subscribe(value => {
console.log(`Subscriber 1: ${value}`);
});
// Emit a new value
behaviorSubject.next('Updated Value');
// New Subscriber will get the last emitted value
behaviorSubject.subscribe(value => {
console.log(`Subscriber 2: ${value}`);
});
এখানে, BehaviorSubject
সাবস্ক্রাইবার ২ কে "Updated Value"
পাঠাবে, কারণ এটি সর্বশেষ মান রাখে।
Angular-এ RxJS ব্যবহার করে আপনি অ্যাসিনক্রোনাস ডেটা ম্যানেজমেন্ট এবং রিএ্যাক্টিভ প্রোগ্রামিং সহজে করতে পারেন।
Read more