Filtering Operators

Filtering operators RxJS-এ এমন অপারেটর যা Observable-এর ডেটা স্ট্রিমের মধ্যে থেকে নির্দিষ্ট মান বা শর্ত অনুসারে ডেটা নির্বাচন বা ফিল্টার করতে ব্যবহৃত হয়। এগুলি ব্যবহৃত হয় যখন আপনি কিছু ডেটা প্রক্রিয়া করতে চান যা একটি নির্দিষ্ট শর্ত পূরণ করে।

ফিল্টারিং অপারেটরগুলোর মাধ্যমে আপনি সহজেই অপরিহার্য ডেটা নির্বাচন করতে এবং অবাঞ্ছিত ডেটাকে বাদ দিতে পারেন, যা অ্যাসিঙ্ক্রোনাস প্রোগ্রামিংয়ে অত্যন্ত গুরুত্বপূর্ণ।

সাধারণ Filtering Operators

RxJS-এ সাধারণভাবে ব্যবহৃত কিছু filtering operators হলো:

1. filter()
2. take()
3. takeUntil()
4. distinct()
5. skip()
6. debounceTime()

1. filter()

filter() অপারেটরটি একটি নির্দিষ্ট শর্তের ওপর ভিত্তি করে ডেটা ফিল্টার করে। এই অপারেটরটি একাধিক মানের মধ্যে শুধুমাত্র সেই মানগুলো নির্বাচন করে যা শর্ত পূরণ করে।

উদাহরণ:

import { of } from 'rxjs';
import { filter } from 'rxjs/operators';

const observable = of(1, 2, 3, 4, 5);

observable.pipe(
  filter(x => x % 2 === 0)  // শুধুমাত্র even সংখ্যাগুলো নির্বাচন করা
).subscribe(console.log);

আউটপুট:

2
4

এখানে, filter() অপারেটরটি শুধুমাত্র এমন মান নির্বাচন করবে যা even (যুগল সংখ্যা)।

2. take()

take() অপারেটরটি প্রথম N সংখ্যক মান গ্রহণ করে এবং তারপর Observable বন্ধ করে দেয়। এটি সাধারণত সীমিত সংখ্যক মান প্রক্রিয়া করার জন্য ব্যবহৃত হয়।

উদাহরণ:

import { of } from 'rxjs';
import { take } from 'rxjs/operators';

const observable = of(1, 2, 3, 4, 5);

observable.pipe(
  take(3)  // শুধুমাত্র প্রথম 3টি মান নেওয়া হবে
).subscribe(console.log);

আউটপুট:

1
2
3

এখানে, take(3) অপারেটরটি কেবল প্রথম ৩টি মান প্রেরণ করবে।

3. takeUntil()

takeUntil() অপারেটরটি একটি নির্দিষ্ট শর্ত বা অন্য একটি Observable পূর্ণ হওয়ার আগে ডেটা নেয়। যখন শর্তটি পূর্ণ হবে, তখন এটি আগের Observable-এ ডেটা গ্রহণ বন্ধ করে দেয়।

উদাহরণ:

import { of, interval } from 'rxjs';
import { takeUntil } from 'rxjs/operators';

const source = interval(1000); // প্রতি সেকেন্ডে একে একে মান বের হবে
const notifier = of('Stop'); // একটি নির্দিষ্ট মান যা টেকআউট করবে

source.pipe(
  takeUntil(notifier)  // notifier Observable মান পাওয়া না যাওয়া পর্যন্ত source থেকে ডেটা নিবে
).subscribe(console.log);

আউটপুট:

0
1
2
3
4

এখানে, takeUntil() একটি notifier Observable ('Stop') চেক করে, এবং যখন তা পাঠানো হবে তখন ডেটা গ্রহণ বন্ধ হয়ে যাবে।

4. distinct()

distinct() অপারেটরটি ডুপ্লিকেট মানগুলো বাদ দেয় এবং কেবলমাত্র ইউনিক মানগুলো Observable-এ পাঠায়।

উদাহরণ:

import { of } from 'rxjs';
import { distinct } from 'rxjs/operators';

const observable = of(1, 2, 2, 3, 4, 4, 5);

observable.pipe(
  distinct()  // ডুপ্লিকেট মান বাদ দেওয়া হবে
).subscribe(console.log);

আউটপুট:

1
2
3
4
5

এখানে, distinct() অপারেটরটি ডুপ্লিকেট মানগুলো বাদ দিয়ে কেবলমাত্র ইউনিক মানগুলো পাঠাবে।

5. skip()

skip() অপারেটরটি প্রথম N সংখ্যক মান বাদ দেয় এবং এরপরের মানগুলো প্রসেস করতে শুরু করে। এটি সাধারণত ডেটার প্রথম কিছু অংশ উপেক্ষা করার জন্য ব্যবহৃত হয়।

উদাহরণ:

import { of } from 'rxjs';
import { skip } from 'rxjs/operators';

const observable = of(1, 2, 3, 4, 5);

observable.pipe(
  skip(2)  // প্রথম 2টি মান বাদ দিয়ে পরবর্তী মানগুলো প্রসেস করা হবে
).subscribe(console.log);

আউটপুট:

3
4
5

এখানে, skip(2) প্রথম দুইটি মান বাদ দিয়ে পরবর্তী মানগুলো পাঠাবে।

6. debounceTime()

debounceTime() অপারেটরটি ডেটা প্রবাহে কিছু বিলম্ব (delay) যুক্ত করে। এটি সাধারণত ইউজার ইনপুটের পর, ইনপুটের শেষে একটি নির্দিষ্ট সময় পর ডেটা গ্রহণ করতে ব্যবহৃত হয়। এটি বিশেষত টাইপিং ইভেন্টে খুব কার্যকরী।

উদাহরণ:

import { fromEvent } from 'rxjs';
import { debounceTime } from 'rxjs/operators';

const input = document.getElementById('search');

fromEvent(input, 'input').pipe(
  debounceTime(500)  // 500 মিলিসেকেন্ড বিলম্ব
).subscribe(event => {
  console.log('User typed:', event.target.value);
});

এখানে, debounceTime(500) অপারেটরটি ইউজার ইনপুটের পরে 500 মিলিসেকেন্ড অপেক্ষা করে ডেটা পাঠাবে, যাতে টাইপিং ইভেন্টে অতিরিক্ত প্রক্রিয়া না হয়।

সারাংশ

Filtering operators RxJS-এ এমন অপারেটর যা Observable-এ প্রবাহিত ডেটার উপর ফিল্টারিং বা নির্বাচনী কার্যক্রম প্রয়োগ করে। এগুলি ডেটা স্ট্রিম থেকে নির্দিষ্ট মান বা শর্ত অনুযায়ী ডেটা বাছাই করার জন্য ব্যবহৃত হয়। এমন অপারেটর যেমন filter(), take(), distinct(), skip(), এবং debounceTime() আপনার অ্যাসিঙ্ক্রোনাস ডেটার সাথে কাজ করতে খুবই কার্যকরী, এবং আপনাকে খুব সহজে প্রয়োজনীয় ডেটা নির্বাচন করতে সাহায্য করে।

RxJS (Reactive Extensions for JavaScript) এ Filtering Operators একটি গুরুত্বপূর্ণ ভূমিকা পালন করে। এই অপারেটরগুলি ডেটার স্ট্রিম থেকে নির্দিষ্ট মান বা ইভেন্টগুলোকে নির্বাচন (filter) করতে ব্যবহৃত হয়। এর মাধ্যমে আপনি শুধুমাত্র সেই মানগুলো পেতে পারেন যেগুলি আপনার নির্দিষ্ট শর্ত পূরণ করে। Filtering অপারেটরগুলির মাধ্যমে আপনি অবাঞ্ছিত ডেটা বা ইভেন্টগুলো সহজেই ফিল্টার করে প্রয়োজনীয় ডেটা বের করতে পারেন।

এখানে আমরা RxJS-এ কিছু গুরুত্বপূর্ণ Filtering Operators নিয়ে আলোচনা করবো এবং তাদের ব্যবহার ব্যাখ্যা করবো।

1. filter()

filter() অপারেটরটি Observable স্ট্রিমের মানগুলির মধ্যে থেকে একটি নির্দিষ্ট শর্ত পূর্ণ করার মাধ্যমে ডেটা ফিল্টার করে।

বৈশিষ্ট্য:

• এটি একটি শর্ত নির্ধারণ করতে ব্যবহার হয়, যা Observable থেকে প্রাপ্ত মানের মধ্যে কেবলমাত্র সেই মানগুলিকে রাখতে সহায়তা করে যেগুলি শর্তটি পূর্ণ করে।
• এটি সাধারণভাবে boolean শর্ত বা ফাংশন হিসেবে ব্যবহার করা হয়।

উদাহরণ:

import { from } from 'rxjs';
import { filter } from 'rxjs/operators';

const numbers = from([1, 2, 3, 4, 5]);

numbers.pipe(
  filter(value => value % 2 === 0) // শুধুমাত্র even সংখ্যাগুলো নেবে
).subscribe(console.log);

এখানে, filter() অপারেটরটি শুধুমাত্র even সংখ্যাগুলো (২, ৪) গ্রহণ করবে এবং তা সাবস্ক্রাইবারে পাঠাবে।

আউটপুট:

2
4

2. take()

take() অপারেটরটি Observable স্ট্রিম থেকে শুধুমাত্র প্রথম Nটি মান গ্রহণ করে এবং এরপর স্ট্রিমটি সম্পূর্ণ করে দেয়। এটি সাধারণত সীমিত সংখ্যক ইভেন্ট বা মান প্রাপ্তি প্রয়োজন হলে ব্যবহার হয়।

বৈশিষ্ট্য:

• প্রথম নির্দিষ্ট সংখ্যক মান গ্রহণ করে।
• একবার যত সংখ্যক মান গ্রহণ করা হয়ে গেলে, Observable complete হয়ে যায়।

উদাহরণ:

import { of } from 'rxjs';
import { take } from 'rxjs/operators';

const source = of(1, 2, 3, 4, 5);

source.pipe(
  take(3) // প্রথম ৩টি মান গ্রহণ করবে
).subscribe(console.log);

এখানে, take(3) প্রথম ৩টি মান (১, ২, ৩) গ্রহণ করবে এবং তারপর Observable সম্পূর্ণ হয়ে যাবে।

আউটপুট:

1
2
3

3. takeWhile()

takeWhile() অপারেটরটি Observable স্ট্রিম থেকে মানগুলো গ্রহণ করতে ব্যবহার হয় যতক্ষণ না একটি নির্দিষ্ট শর্ত পূর্ণ হয়। একবার শর্তটি অমিল হলে, এটি Observable কে complete করে দেয়।

বৈশিষ্ট্য:

• স্ট্রিম থেকে মান নেওয়া হয় যতক্ষণ না শর্ত পূর্ণ হয়।
• শর্তটি মিথ্যা হলে, স্ট্রিমটি বন্ধ হয়ে যায়।

উদাহরণ:

import { from } from 'rxjs';
import { takeWhile } from 'rxjs/operators';

const numbers = from([1, 2, 3, 4, 5, 6, 7, 8]);

numbers.pipe(
  takeWhile(value => value < 5) // ৫ থেকে কম মানগুলো নেবে
).subscribe(console.log);

এখানে, takeWhile() প্রথম ৪টি মান (১, ২, ৩, ৪) নিবে কারণ শর্তটি মিথ্যা হওয়া পর্যন্ত তা চলতে থাকবে।

আউটপুট:

1
2
3
4

4. skip()

skip() অপারেটরটি Observable স্ট্রিম থেকে প্রথম Nটি মান উপেক্ষা (skip) করে এবং তারপর বাকি মানগুলো সাবস্ক্রাইবারকে পাঠায়। এটি মূলত প্রথম কিছু মান উপেক্ষা করতে ব্যবহৃত হয়।

বৈশিষ্ট্য:

• প্রথম নির্দিষ্ট সংখ্যক মান উপেক্ষা করে, এবং পরবর্তী মানগুলো পাঠানো হয়।

উদাহরণ:

import { of } from 'rxjs';
import { skip } from 'rxjs/operators';

const source = of(1, 2, 3, 4, 5);

source.pipe(
  skip(2) // প্রথম ২টি মান উপেক্ষা করবে
).subscribe(console.log);

এখানে, skip(2) প্রথম ২টি মান (১, ২) উপেক্ষা করবে এবং তারপর বাকি মানগুলো (৩, ৪, ৫) সাবস্ক্রাইবারে পাঠাবে।

আউটপুট:

3
4
5

5. distinct()

distinct() অপারেটরটি Observable স্ট্রিমের মধ্যে থেকে শুধুমাত্র আলাদা বা ইউনিক মানগুলো নির্বাচন করে। এটি একাধিকবার আসা একে অপরকে একই মানগুলো ফিল্টার করে।

বৈশিষ্ট্য:

• স্ট্রিমে যদি কোনো পুনরাবৃত্তি মান থাকে, তবে সেটা উপেক্ষা করা হয়।

উদাহরণ:

import { from } from 'rxjs';
import { distinct } from 'rxjs/operators';

const numbers = from([1, 2, 2, 3, 3, 3, 4, 4, 5]);

numbers.pipe(
  distinct() // শুধুমাত্র ইউনিক মানগুলো নেবে
).subscribe(console.log);

এখানে, distinct() অপারেটরটি শুধু ইউনিক মানগুলো (১, ২, ৩, ৪, ৫) রাখবে এবং অন্যান্য পুনরাবৃত্তি মানগুলো ফিল্টার করবে।

আউটপুট:

1
2
3
4
5

সারাংশ

Filtering Operators RxJS-এ ডেটা স্ট্রিম থেকে নির্দিষ্ট মান বা ইভেন্টগুলো নির্বাচন (filter) করতে ব্যবহৃত হয়। এগুলির মাধ্যমে আপনি ডেটা স্ট্রিমে থাকা অপ্রয়োজনীয় মান বা ইভেন্টগুলো বাদ দিয়ে শুধুমাত্র প্রাসঙ্গিক ডেটা বা ইভেন্ট নিতে পারেন। RxJS-এ কিছু গুরুত্বপূর্ণ Filtering অপারেটর রয়েছে যেমন filter(), take(), takeWhile(), skip(), এবং distinct(), যা ডেটা স্ট্রিমের মানগুলোকে সহজে ফিল্টার করতে সহায়তা করে।

RxJS (Reactive Extensions for JavaScript) অনেক শক্তিশালী অপারেটর সরবরাহ করে, যা অ্যাসিঙ্ক্রোনাস ডেটা বা স্ট্রিমের উপর বিভিন্ন ধরনের কার্যক্রম পরিচালনা করতে সহায়ক। এর মধ্যে filter(), first(), এবং last() অপারেটরগুলো খুবই গুরুত্বপূর্ণ, যেগুলি ডেটার স্ট্রিম থেকে নির্দিষ্ট উপাদানগুলো নির্বাচন বা গ্রহণ করতে ব্যবহৃত হয়। এই অপারেটরগুলোর মাধ্যমে আপনি ডেটাকে আরও সহজভাবে প্রক্রিয়া এবং ফিল্টার করতে পারবেন।

1. filter()

filter() অপারেটরটি RxJS-এ ব্যবহৃত হয় ডেটা স্ট্রিমে ফিল্টারিং অপারেশন করার জন্য। এটি একটি predicate function গ্রহণ করে যা একটি ভ্যালু পরীক্ষা করে এবং true/false রিটার্ন করে। যদি প্রেডিকেট ফাংশনটি true রিটার্ন করে, তবে সেই ভ্যালুটি পরবর্তী সাবস্ক্রাইবারের কাছে পৌঁছাবে।

উদাহরণ:

import { from } from 'rxjs';
import { filter } from 'rxjs/operators';

const numbers = from([1, 2, 3, 4, 5, 6]);

const filteredNumbers = numbers.pipe(
  filter(x => x % 2 === 0) // শুধুমাত্র ইভেন নাম্বার ফিল্টার করবে
);

filteredNumbers.subscribe(x => console.log(x)); // Output: 2, 4, 6

এখানে, filter() অপারেটরটি কেবলমাত্র even numbers (যেমন 2, 4, 6) সাবস্ক্রাইবারের কাছে পাঠাবে, কারণ প্রেডিকেট ফাংশনটি x % 2 === 0 ব্যবহার করে শুধু সেগুলোই নির্বাচন করছে।

2. first()

first() অপারেটরটি স্ট্রিমের প্রথম মানটি নির্বাচিত করে এবং তারপরে complete() কল করে। এটি সাধারণত তখন ব্যবহার করা হয় যখন আপনি প্রথম মানটি পাওয়ার পর আর কোনো মানের প্রয়োজন হয় না।

উদাহরণ:

import { from } from 'rxjs';
import { first } from 'rxjs/operators';

const numbers = from([1, 2, 3, 4, 5, 6]);

const firstNumber = numbers.pipe(
  first() // প্রথম মান নির্বাচন করবে
);

firstNumber.subscribe(x => console.log(x)); // Output: 1

এখানে, first() শুধুমাত্র প্রথম মান 1 রিটার্ন করবে এবং সাবস্ক্রিপশন শেষ হবে। এটি ঐ সময়ের পর আর কোনো মান পাঠাবে না।

first() এর একটি অতিরিক্ত ব্যবহার:

আপনি যদি নির্দিষ্ট কোনো শর্তে প্রথম মান চয়ন করতে চান, তাহলে একটি predicate function প্রদান করতে পারেন।

import { from } from 'rxjs';
import { first } from 'rxjs/operators';

const numbers = from([1, 2, 3, 4, 5, 6]);

const firstEven = numbers.pipe(
  first(x => x % 2 === 0) // প্রথম even number নির্বাচন করবে
);

firstEven.subscribe(x => console.log(x)); // Output: 2

এখানে, first() অপারেটরটি প্রথম even number 2 নির্বাচন করবে এবং প্রক্রিয়া শেষ হবে।

3. last()

last() অপারেটরটি স্ট্রিমের সর্বশেষ মানটি নির্বাচন করে এবং complete() কল করে। এটি যখন প্রয়োজন হয়, যেমন আপনি শুধু ডেটার শেষ অংশ দেখতে চান, তখন ব্যবহার করা হয়।

উদাহরণ:

import { from } from 'rxjs';
import { last } from 'rxjs/operators';

const numbers = from([1, 2, 3, 4, 5, 6]);

const lastNumber = numbers.pipe(
  last() // শেষ মান নির্বাচন করবে
);

lastNumber.subscribe(x => console.log(x)); // Output: 6

এখানে, last() শুধুমাত্র শেষ মান 6 রিটার্ন করবে এবং সাবস্ক্রিপশন শেষ হয়ে যাবে।

last() এর একটি অতিরিক্ত ব্যবহার:

আপনি যদি একটি নির্দিষ্ট শর্তের ভিত্তিতে শেষ মান নির্বাচন করতে চান, তবে একটি predicate function প্রদান করতে পারেন।

import { from } from 'rxjs';
import { last } from 'rxjs/operators';

const numbers = from([1, 2, 3, 4, 5, 6]);

const lastEven = numbers.pipe(
  last(x => x % 2 === 0) // শেষ even number নির্বাচন করবে
);

lastEven.subscribe(x => console.log(x)); // Output: 6

এখানে, last() অপারেটরটি শেষ even number 6 নির্বাচন করবে।

সারাংশ

• filter(): ডেটা স্ট্রিম থেকে একটি শর্তের উপর ভিত্তি করে উপাদান নির্বাচন করে। এটি একটি predicate function নেয়, যা true হলে ওই মানটি স্ট্রিমে পাঠানো হয়।
• first(): স্ট্রিমের প্রথম মানটি নির্বাচন করে এবং তারপর সাবস্ক্রিপশন শেষ করে। আপনি একটি শর্তও প্রদান করতে পারেন, যাতে প্রথম সেই মানটি নির্বাচন করা হয় যা শর্ত পূরণ করে।
• last(): স্ট্রিমের শেষ মানটি নির্বাচন করে। এটি সর্বশেষ মানটি সাবস্ক্রাইবারকে প্রদান করে, এবং আপনি একটি শর্তের ভিত্তিতে শেষ মান নির্বাচন করতে পারেন।

এই তিনটি অপারেটরের মাধ্যমে আপনি RxJS-এ খুব সহজে ডেটার স্ট্রিমে ফিল্টারিং, প্রথম বা শেষ মান নির্বাচন করতে পারেন, যা অনেক ধরনের ডেটা প্রক্রিয়া এবং অ্যাসিঙ্ক্রোনাস অপারেশন সহজ করে দেয়।

RxJS এর take(), takeUntil(), এবং takeWhile() অপারেটরগুলো এমন অপারেটর যা Observable স্ট্রিম থেকে নির্দিষ্ট সংখ্যক বা শর্তভিত্তিক মান গ্রহণ করতে ব্যবহৃত হয়। এগুলি প্রধানত "terminate early" করার জন্য ব্যবহৃত হয়, অর্থাৎ আমরা যখন চাই, তখন ডেটা স্ট্রিম থেকে কিছু মান গ্রহণ করতে থামিয়ে দিতে পারি। প্রতিটি অপারেটরের কার্যকারিতা কিছুটা আলাদা এবং ব্যবহারিক ক্ষেত্রে তাদের ভূমিকা উল্লেখযোগ্য।

take() Operator

take() অপারেটরটি Observable থেকে প্রথম N সংখ্যক মান গ্রহণ করে। এটি সেই মানগুলো সাবস্ক্রাইব করার পর স্ট্রিমটি বন্ধ করে দেয়।

বৈশিষ্ট্য:

• first N items: এই অপারেটরটি নির্দিষ্ট সংখ্যক (N) মান স্ট্রিম থেকে গ্রহণ করবে।
• complete immediately: যখন N সংখ্যক মান গ্রহণ করা হয়, তখন complete() কল হয়ে যায় এবং স্ট্রিম বন্ধ হয়ে যায়।

উদাহরণ:

import { of } from 'rxjs';
import { take } from 'rxjs/operators';

const observable = of(1, 2, 3, 4, 5);

observable.pipe(
  take(3) // প্রথম ৩টি মান গ্রহণ করা হবে
).subscribe(console.log);

আউটপুট:

1
2
3

এখানে, take(3) ব্যবহার করে প্রথম তিনটি মান গ্রহণ করা হয়েছে, এবং এর পর আর কোনো মান গ্রহণ করা হয়নি।

takeUntil() Operator

takeUntil() অপারেটরটি যখন পর্যন্ত একটি নির্দিষ্ট observable মান প্রেরণ করে, তখন পর্যন্ত মূল Observable থেকে ডেটা গ্রহণ করতে সাহায্য করে। এটি একটি "triggering observable" ব্যবহার করে, যা একটি শর্ত পূর্ণ হলে স্ট্রিম বন্ধ করে দেয়।

বৈশিষ্ট্য:

• condition based: একটি নির্দিষ্ট condition এর উপর ভিত্তি করে Observable বন্ধ হয়ে যায়।
• observable-based termination: একটি অন্য Observable, যা ট্রিগার হিসেবে কাজ করে, সেটি যখন শেষ হবে তখন takeUntil() স্ট্রিম থেকে ডেটা নেওয়া থামিয়ে দেবে।

উদাহরণ:

import { of, interval } from 'rxjs';
import { takeUntil } from 'rxjs/operators';

const source = interval(1000); // 1 সেকেন্ডে একটি মান দিবে
const notifier = of('stop'); // একটি স্টপ সিগন্যাল

source.pipe(
  takeUntil(notifier) // notifier মানটি আসলে, takeUntil কার্যকর হবে
).subscribe(console.log);

আউটপুট:

0
1
2
3
...

এখানে, takeUntil(notifier) স্ট্রিম থেকে ডেটা গ্রহণ করতে থাকবে যতক্ষণ না notifier মান প্রেরণ করে। যেহেতু notifier একটি সহজ Observable যা কেবল একবার stop মান দেয়, এটি takeUntil() স্ট্রিম বন্ধ করতে সাহায্য করে।

takeWhile() Operator

takeWhile() অপারেটরটি একটি শর্তের ওপর ভিত্তি করে Observable থেকে মান গ্রহণ করে। এটি শুধুমাত্র তখনই মান গ্রহণ করবে যখন একটি নির্দিষ্ট শর্ত true থাকবে। যখন শর্তটি মিথ্যা হয়, তখন Observable বন্ধ হয়ে যায়।

বৈশিষ্ট্য:

• condition-based filtering: এটি একাধিক মান নির্বাচন করতে ব্যবহৃত হয় যেগুলি শর্ত অনুযায়ী সঠিক।
• terminate on false condition: যখন শর্তটি মিথ্যা হয়, তখন ডেটা গ্রহণ বন্ধ হয়ে যায় এবং স্ট্রিমটি শেষ হয়ে যায়।

উদাহরণ:

import { of } from 'rxjs';
import { takeWhile } from 'rxjs/operators';

const observable = of(1, 2, 3, 4, 5);

observable.pipe(
  takeWhile(x => x < 4) // যতক্ষণ x < 4 হবে, ততক্ষণ মান গ্রহণ করবে
).subscribe(console.log);

আউটপুট:

1
2
3

এখানে, takeWhile(x => x < 4) শর্ত অনুযায়ী মান গ্রহণ করেছে যতক্ষণ না x < 4 ছিল। যখন 4 এসেছিল, তখন এটি স্ট্রিম বন্ধ করে দেয়।

take(), takeUntil(), এবং takeWhile() এর মধ্যে পার্থক্য

সারাংশ

• take() প্রথম N সংখ্যক মান গ্রহণ করে এবং তারপর Observable বন্ধ করে দেয়।
• takeUntil() একটি অন্য Observable এর মানের উপর ভিত্তি করে ডেটা গ্রহণ বন্ধ করে দেয়।
• takeWhile() একটি শর্ত অনুযায়ী ডেটা গ্রহণ করে যতক্ষণ না শর্তটি মিথ্যা হয়।

এই তিনটি অপারেটরই খুবই কার্যকরী যখন আপনি ডেটা স্ট্রিম থেকে নির্দিষ্ট পরিমাণ বা শর্তভিত্তিক মান গ্রহণ করতে চান এবং তা সম্পূর্ণ করার পর স্ট্রিম বন্ধ করতে চান।

RxJS (Reactive Extensions for JavaScript) একটি শক্তিশালী লাইব্রেরি যা Observables এবং Operators ব্যবহার করে অ্যাসিঙ্ক্রোনাস ডেটা এবং ইভেন্ট স্ট্রিমের উপর কার্যকরীভাবে অপারেশন করার জন্য ব্যবহৃত হয়। এর মধ্যে কিছু গুরুত্বপূর্ণ Filtering Techniques রয়েছে যা ডেটার প্রক্রিয়াকরণ আরও কার্যকরী এবং দক্ষ করে তোলে। এর মধ্যে দুটি জনপ্রিয় ফিল্টারিং অপারেটর হল debounceTime() এবং distinctUntilChanged()।

এই অপারেটরগুলো অ্যাসিঙ্ক্রোনাস ডেটা প্রক্রিয়াকরণের সময়ে নির্দিষ্ট সময় বা অবস্থা অনুযায়ী ডেটা ফিল্টার করতে সহায়তা করে।

debounceTime()

debounceTime() হল একটি জনপ্রিয় ফিল্টারিং অপারেটর, যা সাধারণত ইউজার ইন্টারঅ্যাকশনের ক্ষেত্রে ব্যবহৃত হয়, যেমন টাইপিং, সার্চ, বা স্ক্রলিং। এটি একটি নির্দিষ্ট সময় অন্তর শেষ মান গ্রহণ করে এবং শুধুমাত্র সেই মানটিই সাবস্ক্রাইবারের কাছে পাঠায়। যদি নির্দিষ্ট সময়ের মধ্যে নতুন কোনো মান আসে, তাহলে পূর্বের মানটি বাতিল হয়ে যায় এবং নতুন মানটি নেওয়া হয়।

debounceTime() এর ব্যবহার:

• এটি কেবল শেষ মানটিই গ্রহণ করে: debounceTime() নির্দিষ্ট সময়ের মধ্যে যখন নতুন মান আসবে, তখন পূর্বের মানকে বাতিল করে এবং শেষ মানটিকে সাবস্ক্রাইবারে পাঠাবে।
• এটি ডেটা ফ্লো কমায়: ইউজার ইন্টারঅ্যাকশন যেমন টাইপিং বা স্ক্রলিং এর সময় ডেটার পরিমাণ কমাতে এবং unnecessary ডেটা ট্রাফিক এড়াতে ব্যবহৃত হয়।

উদাহরণ:

import { fromEvent } from 'rxjs';
import { debounceTime, map } from 'rxjs/operators';

// একটি ইনপুট ফিল্ডের ইভেন্ট
const input = document.getElementById('search');

fromEvent(input, 'input').pipe(
  debounceTime(500), // ৫০০ মিলিসেকেন্ড অপেক্ষা করবে
  map(event => event.target.value) // ইনপুটের মান গ্রহণ করবে
).subscribe(value => {
  console.log('Search query:', value); // শুধুমাত্র টাইপিং শেষ হলে আউটপুট হবে
});

এখানে, debounceTime(500) ব্যবহার করে, ইউজারের টাইপিংয়ের পর ৫০০ মিলিসেকেন্ড অপেক্ষা করা হয় এবং এর পরে শুধুমাত্র শেষ টাইপিং মানই আউটপুট হিসাবে প্রদর্শিত হয়। এর ফলে অপ্রয়োজনীয় সার্চ রিকোয়েস্ট থেকে রক্ষা পাওয়া যায়।

distinctUntilChanged()

distinctUntilChanged() অপারেটরটি একই মানের পুনরাবৃত্তি ফিল্টার করার জন্য ব্যবহৃত হয়। যখন একটি Observable নির্দিষ্ট মান প্রদান করতে থাকে, তখন এই অপারেটরটি শুধু সেই মানটিকে সাবস্ক্রাইবারে পাঠাবে যদি এটি আগের মানের চেয়ে ভিন্ন হয়। এটি প্রাথমিকভাবে এক্সট্রা বা অপ্রয়োজনীয় ডেটা নিষ্ক্রিয় করতে ব্যবহৃত হয়, যা আগের মানের সাথে সমান হতে পারে।

distinctUntilChanged() এর ব্যবহার:

• এটি পূর্ববর্তী মানের সঙ্গে তুলনা করে: যদি কোনো মান আগের মানের সমান হয়, তবে এটি ফিল্টার হয়ে যাবে এবং সাবস্ক্রাইবারে পাঠানো হবে না।
• এটি এক্সট্রা ডেটা ফিল্টার করে: যখন আপনার দরকার শুধুমাত্র নতুন বা ভিন্ন মান, তখন এটি কার্যকর।

উদাহরণ:

import { of } from 'rxjs';
import { distinctUntilChanged } from 'rxjs/operators';

const observable = of(1, 1, 2, 3, 3, 4, 5, 5);

observable.pipe(
  distinctUntilChanged() // আগের মানের সাথে তুলনা করে ফিল্টার করবে
).subscribe(value => console.log(value));

এই উদাহরণে, distinctUntilChanged() শুধুমাত্র বিভিন্ন মানগুলোকেই সাবস্ক্রাইবারে পাঠাবে। আউটপুট হবে:

1
2
3
4
5

এখানে, আগের মানের সাথে যেগুলি সমান ছিল (যেমন 1, 3, 5), সেগুলি ফিল্টার হয়ে গেছে।

debounceTime() এবং distinctUntilChanged() এর সমন্বয়

এই দুটি অপারেটরের সমন্বয় ব্যবহার করে আপনি কিভাবে আরও দক্ষ ফিল্টারিং করতে পারেন তা দেখা যাক। উদাহরণস্বরূপ, যদি আপনি একটি সার্চ ইন্টাফেস তৈরি করেন, যেখানে ইউজারের টাইপিংয়ের পরে শুধুমাত্র নতুন, অর্থপূর্ণ এবং ভিন্ন অনুসন্ধান পাঠানো হবে, তবে আপনি debounceTime() এবং distinctUntilChanged() একসাথে ব্যবহার করতে পারেন।

উদাহরণ:

import { fromEvent } from 'rxjs';
import { debounceTime, map, distinctUntilChanged } from 'rxjs/operators';

const input = document.getElementById('search');

fromEvent(input, 'input').pipe(
  debounceTime(500), // ৫০০ মিলিসেকেন্ড অপেক্ষা করবে
  map(event => event.target.value), // ইনপুটের মান গ্রহণ করবে
  distinctUntilChanged() // যদি আগের মানের সাথে সমান হয়, তবে ফিল্টার করবে
).subscribe(value => {
  console.log('Search query:', value); // শুধুমাত্র নতুন এবং ভিন্ন মান হবে
});

এখানে, debounceTime(500) অপেক্ষা করবে যাতে ইউজারের টাইপিং শেষে শুধুমাত্র একবার সার্চ রিকোয়েস্ট পাঠানো হয়, এবং distinctUntilChanged() নিশ্চিত করবে যে শুধুমাত্র যখন নতুন মান আসে, তখনই সার্চ রিকোয়েস্ট পাঠানো হবে।

সারাংশ

• debounceTime(): এটি ইউজার ইনপুট বা অন্য কোনো অ্যাসিঙ্ক্রোনাস ইভেন্টে টাইপিং বা পরিবর্তন ঘটলে, নির্দিষ্ট সময় পর মান গ্রহণ করে। এর মাধ্যমে আপনি অপ্রয়োজনীয় বা অতিরিক্ত ডেটা কমাতে পারেন।
• distinctUntilChanged(): এটি একে অপরের সাথে সমান হওয়া মানগুলোকে ফিল্টার করে দেয়, যাতে একই মানের পুনরাবৃত্তি ডেটা স্ট্রিমে না আসে।

এই দুটি অপারেটরের সমন্বয়ে আপনি আরো নিখুঁত এবং কার্যকরী ডেটা ফিল্টারিং করতে পারেন, যা আপনার অ্যাসিঙ্ক্রোনাস প্রোগ্রামিংয়ের কর্মক্ষমতা উন্নত করবে।