RxJS چیست؟

RxJS مخفف Reactive Extensions for JavaScript هست و یک کتابخونه (library) برای کار با داده‌های asynchronous و event-based به صورت Reactive Programming هست.

به زبان ساده:

• هرجایی که با داده‌هایی که در طول زمان تغییر می‌کنند (مثل event، AJAX، WebSocket، interval، user input و…) سروکار داری، RxJS می‌تونه کمک بزرگی باشه.
• به جای استفاده از callback یا promise، از Stream (جریان داده) و Observable استفاده می‌کنی و با یک سری عملگر (Operators) اونها رو مدیریت می‌کنی.

در چه فریمورک‌هایی میشه استفاده کرد؟

• Angular (به طور پیش‌فرض استفاده میشه، مخصوصاً برای HTTP، فرم‌ها و eventها)
• React (مخصوصاً با پروژه‌هایی که state management reactive نیاز دارند مثل redux-observable)
• Vue.js (با کمک افزونه‌هایی مثل vue-rx)
• Node.js (برای مدیریت streamها و eventها)
• و حتی در پروژه‌های plain JS یا هرجایی که جاوااسکریپت داری، قابل استفاده است.

یک مثال ساده

مثال ۱: استفاده ساده در جاوااسکریپت

import { Observable } from 'rxjs';

const myObservable = new Observable(subscriber => {
  subscriber.next('سلام!');
  setTimeout(() => {
    subscriber.next('یک ثانیه بعد...');
    subscriber.complete();
  }, 1000);
});

myObservable.subscribe({
  next(x) { console.log(x); },
  complete() { console.log('پایان!'); }
});

خروجی کنسول:

سلام!
یک ثانیه بعد...
پایان!

مثال ۲: استفاده در Angular برای درخواست HTTP

// Angular Service
import { HttpClient } from '@angular/common/http';
import { Injectable } from '@angular/core';

@Injectable({ providedIn: 'root' })
export class UserService {
  constructor(private http: HttpClient) {}

  getUsers() {
    return this.http.get('/api/users'); // این یک Observable برمی‌گردونه
  }
}

// Angular Component
@Component({ /* ... */ })
export class UserListComponent implements OnInit {
  users$ = this.userService.getUsers();

  constructor(private userService: UserService) {}

  ngOnInit() {
    this.users$.subscribe(users => {
      console.log(users);
    });
  }
}

مثال ۳: استفاده در React با rxjs

import { fromEvent } from 'rxjs';

useEffect(() => {
  const click$ = fromEvent(document, 'click');
  const subscription = click$.subscribe(() => {
    console.log('کلیک شد!');
  });

  return () => subscription.unsubscribe();
}, []);

جمع‌بندی خیلی سریع

• RxJS ابزاری برای کار با داده‌های غیرهمزمان و رویدادمحور به صورت خیلی قدرتمند و قابل ترکیب هست.
• توی Angular اجباریه، توی React و Vue هم می‌تونه خیلی کمک کنه.
• برای هرکاری که با event یا stream سروکار داری، می‌تونی ازش استفاده کنی.