Custom Operators তৈরি এবং ব্যবহার

Advanced RxJS Techniques - আরএক্সজেএস (RxJS) - Web Development

256

RxJS (Reactive Extensions for JavaScript) একটি শক্তিশালী লাইব্রেরি যা বিভিন্ন ধরনের operators সরবরাহ করে, যা Observables থেকে ডেটা প্রক্রিয়াকরণের জন্য ব্যবহৃত হয়। তবে, কখনও কখনও আপনি এমন কিছু কার্যকরী অপারেটর তৈরি করতে চাইবেন যা RxJS এর স্ট্যান্ডার্ড অপারেটরগুলির মধ্যে অন্তর্ভুক্ত না থাকে। এই ক্ষেত্রে, Custom Operators তৈরি করা একটি দরকারী পদ্ধতি।

RxJS-এ Custom Operators তৈরি করার মাধ্যমে আপনি নিজের প্রয়োজন অনুযায়ী স্ট্রিমে কার্যকলাপ যোগ করতে পারেন এবং এভাবে ডেটা প্রসেসিংয়ের প্রক্রিয়াকে আরও নির্দিষ্ট ও নিয়ন্ত্রণযোগ্য করতে পারবেন।


Custom Operators কী?

Custom Operators হল আপনার নিজের কাস্টম লজিকের ভিত্তিতে তৈরি অপারেটর। এটি RxJS স্ট্রিমে ডেটা ট্রান্সফরম বা ফিল্টার করার জন্য ব্যবহার করা যেতে পারে। Custom operators তৈরি করতে, আপনাকে higher-order function ব্যবহার করতে হবে, যা মূল Observable-এর উপর কাজ করবে এবং Observable রিটার্ন করবে।

Custom Operator তৈরি করার জন্য সাধারণভাবে নিম্নলিখিত ধাপগুলো অনুসরণ করা হয়:

  1. একটি ফাংশন তৈরি করা যা RxJS অপারেটরের মতো কাজ করবে।
  2. ফাংশনটি একটি Observable গ্রহণ করবে এবং তার সাথে একটি transformation বা side-effect পরিচালনা করবে।
  3. নতুন Observable রিটার্ন করা।

1. Custom Operator তৈরি করা

Custom operators তৈরি করতে, প্রথমে একটি ফাংশন তৈরি করতে হবে যা একটি Observable গ্রহন করবে এবং তার সাথে কাজ করবে। আমরা rxjs এর Observable.create() বা new Observable() ব্যবহার করতে পারি।

উদাহরণ: Custom double Operator তৈরি করা

ধরা যাক, আমরা একটি কাস্টম অপারেটর তৈরি করতে চাই, যা প্রতিটি সংখ্যাকে দুই গুণ করবে।

import { Observable } from 'rxjs';

// Custom operator: double
function double() {
  return (source) => new Observable(observer => {
    // subscribe to the source observable
    return source.subscribe({
      next(value) {
        // double the value
        observer.next(value * 2);
      },
      error(err) {
        observer.error(err);
      },
      complete() {
        observer.complete();
      }
    });
  });
}

এখানে, double() নামের একটি custom operator তৈরি করা হয়েছে যা একটি Observable স্ট্রিম গ্রহণ করবে এবং প্রতিটি মানকে দুই গুণ করবে।


2. Custom Operator ব্যবহার করা

এখন, এই কাস্টম অপারেটরটি ব্যবহার করে আমরা একটি Observable তৈরি করে তা সাবস্ক্রাইব করতে পারি।

import { of } from 'rxjs';

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

numbers$.pipe(
  double()  // Apply the custom operator
).subscribe(value => {
  console.log(value);  // Output: 2, 4, 6, 8, 10
});

এখানে, double() কাস্টম অপারেটরটি প্রতিটি মানকে দুই গুণ করেছে। আউটপুট হবে:

2
4
6
8
10

3. আরও উদাহরণ: Custom delayBy Operator

ধরা যাক, আমরা একটি কাস্টম অপারেটর তৈরি করতে চাই যা নির্দিষ্ট সময়ে প্রতিটি মান বিলম্বিত করবে।

import { Observable } from 'rxjs';

// Custom operator: delayBy
function delayBy(time: number) {
  return (source) => new Observable(observer => {
    return source.subscribe({
      next(value) {
        setTimeout(() => {
          observer.next(value);
        }, time);
      },
      error(err) {
        observer.error(err);
      },
      complete() {
        observer.complete();
      }
    });
  });
}

এখানে delayBy() অপারেটরটি একটি নির্দিষ্ট সময়ের জন্য প্রতিটি মান বিলম্বিত করবে। time প্যারামিটারটি বিলম্বের সময় নির্ধারণ করে।

উদাহরণ: delayBy অপারেটর ব্যবহার করা

import { of } from 'rxjs';

const numbers$ = of(1, 2, 3, 4);

numbers$.pipe(
  delayBy(1000)  // Apply the custom delayBy operator with 1 second delay
).subscribe(value => {
  console.log(value);  // Output: 1, 2, 3, 4 (with 1 second delay)
});

এখানে, delayBy(1000) ব্যবহার করে প্রতিটি মান ১ সেকেন্ড বিলম্বিত হয়ে সাবস্ক্রাইবারে পাঠানো হচ্ছে।


4. Custom Operator তৈরির সুবিধা

  • Code Reusability: একবার কাস্টম অপারেটর তৈরি করে আপনি তা বারবার ব্যবহার করতে পারেন, ফলে কোড পুনরাবৃত্তি কমে যায়।
  • Readability: Custom অপারেটরগুলোর মাধ্যমে আপনার কোডের পাঠযোগ্যতা বৃদ্ধি পায়, কারণ সেগুলি শুধুমাত্র একটি নির্দিষ্ট কাজ সম্পন্ন করে।
  • Separation of Concerns: যখন আপনার অ্যাসিঙ্ক্রোনাস বা রিয়্যাক্টিভ কোডে একটি নির্দিষ্ট লজিক প্রয়োগ করতে হয়, তখন কাস্টম অপারেটর তৈরি করা কোডের দায়িত্বগুলি স্পষ্ট করে।

5. একটি বাস্তব উদাহরণ: Custom retryWhen অপারেটর

ধরা যাক, আমরা একটি কাস্টম retryWhen অপারেটর তৈরি করতে চাই, যা নির্দিষ্ট সময়ের মধ্যে ইরর (error) ঘটলে পুনরায় চেষ্টা করবে।

import { Observable } from 'rxjs';

// Custom retryWhen operator
function customRetryWhen(retryCount: number, delay: number) {
  return (source) => new Observable(observer => {
    let attempts = 0;

    return source.subscribe({
      next(value) {
        observer.next(value);
      },
      error(err) {
        if (attempts < retryCount) {
          attempts++;
          console.log(`Retrying... attempt #${attempts}`);
          setTimeout(() => source.subscribe(observer), delay); // Retry after delay
        } else {
          observer.error(err);  // If retry limit exceeded, throw the error
        }
      },
      complete() {
        observer.complete();
      }
    });
  });
}

এখানে customRetryWhen() অপারেটরটি ত্রুটি ঘটলে নির্দিষ্ট সংখ্যক বার পুনরায় চেষ্টা করবে এবং প্রতিবার retry করার আগে কিছু সময় বিলম্ব করবে।

উদাহরণ: Custom retryWhen অপারেটর ব্যবহার

import { throwError, of } from 'rxjs';

const observable$ = throwError('Something went wrong');

observable$.pipe(
  customRetryWhen(3, 1000)  // Retry 3 times with 1 second delay
).subscribe({
  next: (value) => console.log(value),
  error: (err) => console.log('Final Error:', err)
});

এখানে, customRetryWhen(3, 1000) ৩ বার পুনরায় চেষ্টা করার জন্য কাস্টম লজিক প্রয়োগ করেছে, এবং প্রত্যেকবার ১ সেকেন্ডের বিলম্ব দিয়েছে।


সারাংশ

RxJS তে Custom Operators তৈরি করার মাধ্যমে আপনি অ্যাসিঙ্ক্রোনাস স্ট্রিমে আপনার প্রয়োজনীয় কার্যকলাপ সহজে যোগ করতে পারেন। আপনি যেকোনো ধরনের ট্রান্সফরমেশন, ফিল্টারিং, বা side-effects তৈরি করতে পারেন এবং সেগুলো স্ট্রিমের মধ্যে প্রয়োগ করতে পারেন।

কাস্টম অপারেটরের কিছু প্রধান সুবিধা:

  • Code Reusability: একবার তৈরি করা অপারেটর পুনরায় ব্যবহার করা যায়।
  • Readability: কোড আরও সহজ এবং পরিষ্কার হয়।
  • Flexibility: আপনার প্রয়োজন অনুযায়ী স্ট্রিমে যেকোনো লজিক প্রয়োগ করতে পারবেন।

এটি RxJS-এর শক্তিশালী বৈশিষ্ট্যগুলির একটি, যা আপনার অ্যাসিঙ্ক্রোনাস ডেটা প্রক্রিয়াকরণকে আরও নিয়ন্ত্রণযোগ্য এবং কার্যকরী করে তোলে।

Content added By
Promotion

Are you sure to start over?

Loading...