RxJS Patterns

🧹 RxJS Patterns: Keeping Your App Clean & Happy

The Leaky Bucket Story 🪣

Imagine you have a magic bucket that catches raindrops. Every time it rains, you put out a new bucket. But here’s the problem: you never take the buckets back inside!

Soon, your yard is FULL of buckets. They’re everywhere! Your house is surrounded by forgotten buckets. This is exactly what happens in Angular apps when we don’t clean up our subscriptions.

🧠 What Are RxJS Patterns?

RxJS patterns are like smart habits that help us:

1. Memory Leak Prevention → Taking the buckets back inside (cleaning up subscriptions)
2. State Management Patterns → Organizing our toys in labeled boxes (managing app data)

Let’s learn both!

Part 1: Memory Leak Prevention 🚿

What is a Memory Leak?

Think of your computer’s memory like a closet. Every subscription is like putting a toy in the closet. If you never take toys out, eventually… the closet explodes! 💥

graph TD
    A["🎮 New Subscription"] --> B["📦 Goes in Memory"]
    B --> C{Component Destroyed?}
    C -->|No Cleanup| D["💥 Memory Leak!"]
    C -->|With Cleanup| E["✨ Memory Free"]

The 4 Magic Cleanup Spells ✨

1. The takeUntilDestroyed() Spell (Best for Angular 16+)

This is like a magic broom that sweeps everything when you leave the room!

import { takeUntilDestroyed } from '@angular/core/rxjs-interop';

@Component({...})
export class MyComponent {
  constructor() {
    this.myService.getData()
      .pipe(takeUntilDestroyed())
      .subscribe(data => {
        console.log(data);
      });
  }
}

Why it works: Angular automatically cleans up when the component dies. No extra work needed!

2. The destroy$ Subject Pattern

Like having a “Game Over” button that stops everything!

@Component({...})
export class MyComponent implements OnDestroy {
  private destroy$ = new Subject<void>();

  ngOnInit() {
    this.myService.getData()
      .pipe(takeUntil(this.destroy$))
      .subscribe(data => {
        console.log(data);
      });
  }

  ngOnDestroy() {
    this.destroy$.next();    // Press "Game Over"
    this.destroy$.complete(); // Turn off the game
  }
}

3. The Async Pipe (Template Magic)

Let Angular do ALL the work! Like having a robot helper.

<!-- In your template -->
<div *ngIf="data$ | async as data">
  {{ data.name }}
</div>

// In your component
data$ = this.myService.getData();
// No subscribe! No cleanup! Angular handles it!

This is the SAFEST pattern! ✅

4. Manual Unsubscribe (Old School)

Like remembering to turn off the lights yourself.

@Component({...})
export class MyComponent implements OnDestroy {
  private subscription: Subscription;

  ngOnInit() {
    this.subscription = this.myService
      .getData()
      .subscribe(data => {
        console.log(data);
      });
  }

  ngOnDestroy() {
    this.subscription.unsubscribe();
  }
}

Quick Comparison Table

Part 2: State Management Patterns 🗃️

What is State?

State is like the current score in a video game. It’s all the information your app needs to remember:

• Is the user logged in?
• What items are in the cart?
• Is the menu open or closed?

The BehaviorSubject Pattern 🎯

Think of BehaviorSubject as a magic whiteboard that:

• Always shows the current message
• Anyone can read it
• Only special people can write on it

@Injectable({ providedIn: 'root' })
export class CartService {
  // The magic whiteboard (private = only we can write)
  private cartItems$ = new BehaviorSubject<Item[]>([]);

  // Public window to see the whiteboard
  readonly items$ = this.cartItems$.asObservable();

  // Add item to cart
  addItem(item: Item) {
    const current = this.cartItems$.getValue();
    this.cartItems$.next([...current, item]);
  }

  // Get current value instantly
  getItemCount(): number {
    return this.cartItems$.getValue().length;
  }
}

graph TD
    A["Component A"] -->|Reads| S["🗃️ BehaviorSubject"]
    B["Component B"] -->|Reads| S
    C["Component C"] -->|Updates| S
    S -->|Notifies| A
    S -->|Notifies| B

The Facade Pattern 🏛️

A Facade is like a friendly receptionist at a hotel. Instead of finding the kitchen, laundry, and pool yourself, you just ask the receptionist!

@Injectable({ providedIn: 'root' })
export class UserFacade {
  // Private state
  private userState$ = new BehaviorSubject<User | null>(null);
  private loading$ = new BehaviorSubject<boolean>(false);

  // Public selectors (what components can see)
  readonly user$ = this.userState$.asObservable();
  readonly isLoading$ = this.loading$.asObservable();
  readonly isLoggedIn$ = this.user$.pipe(
    map(user => user !== null)
  );

  constructor(private api: ApiService) {}

  // Actions (what components can do)
  login(email: string, password: string) {
    this.loading$.next(true);
    this.api.login(email, password).subscribe({
      next: (user) => {
        this.userState$.next(user);
        this.loading$.next(false);
      },
      error: () => this.loading$.next(false)
    });
  }

  logout() {
    this.userState$.next(null);
  }
}

In your component:

@Component({...})
export class HeaderComponent {
  user$ = this.userFacade.user$;
  isLoggedIn$ = this.userFacade.isLoggedIn$;

  constructor(private userFacade: UserFacade) {}

  onLogout() {
    this.userFacade.logout();
  }
}

The Scan Pattern (Running Total) 🧮

Like a piggy bank counter that remembers every coin!

@Injectable({ providedIn: 'root' })
export class CounterService {
  private actions$ = new Subject<number>();

  // Scan keeps a running total
  readonly count$ = this.actions$.pipe(
    scan((total, change) => total + change, 0),
    startWith(0)
  );

  increment() {
    this.actions$.next(1);  // Add 1
  }

  decrement() {
    this.actions$.next(-1); // Subtract 1
  }

  add(amount: number) {
    this.actions$.next(amount);
  }
}

Combining Multiple States 🎨

Sometimes you need to mix states together, like making a smoothie!

@Injectable({ providedIn: 'root' })
export class DashboardFacade {
  private user$ = this.userService.user$;
  private cart$ = this.cartService.items$;
  private notifications$ = this.notifyService.all$;

  // Combine everything into one yummy smoothie!
  readonly dashboardData$ = combineLatest([
    this.user$,
    this.cart$,
    this.notifications$
  ]).pipe(
    map(([user, cart, notifications]) => ({
      userName: user?.name ?? 'Guest',
      cartCount: cart.length,
      unreadCount: notifications.filter(n => !n.read).length
    }))
  );
}

🚀 Pro Tips

Tip 1: Always Use shareReplay for Expensive Operations

readonly expensiveData$ = this.http.get('/api/data').pipe(
  shareReplay({ bufferSize: 1, refCount: true })
);
// Now multiple subscribers won't trigger multiple API calls!

Tip 2: Use distinctUntilChanged to Avoid Extra Work

readonly userName$ = this.user$.pipe(
  map(user => user?.name),
  distinctUntilChanged()  // Only emit if name actually changed!
);

Summary: The Golden Rules 🏆

Remember the Bucket Story! 🪣

Every subscription is a bucket. Every cleanup is bringing the bucket home. Happy apps have no forgotten buckets!

Now go forth and write leak-free, well-organized Angular apps! 🚀✨