Reactive Programming Skill

Reactive Programming

Overview
When to Use
Quick Start
Reference Guides
Best Practices

Overview

Build responsive applications using reactive streams and observables for handling asynchronous data flows.

When to Use

Complex async data flows
Real-time data updates
Event-driven architectures
UI state management
WebSocket/SSE handling
Combining multiple data sources

Quick Start

Minimal working example:

import {
  Observable,
  Subject,
  BehaviorSubject,
  fromEvent,
  interval,
} from "rxjs";
import {
  map,
  filter,
  debounceTime,
  distinctUntilChanged,
  switchMap,
} from "rxjs/operators";

// Create observable from array
const numbers$ = new Observable<number>((subscriber) => {
  subscriber.next(1);
  subscriber.next(2);
  subscriber.next(3);
  subscriber.complete();
});

numbers$.subscribe({
  next: (value) => console.log(value),
// ... (see reference guides for full implementation)

Reference Guides

Detailed implementations in the references/ directory:

| Guide | Contents | |---|---| | RxJS Basics | RxJS Basics | | Search with Debounce | Search with Debounce | | State Management | State Management | | WebSocket with Reconnection | WebSocket with Reconnection | | Combining Multiple Streams | Combining Multiple Streams | | Backpressure Handling | Backpressure Handling | | Custom Operators | Custom Operators |

Best Practices

✅ DO

Unsubscribe to prevent memory leaks
Use operators to transform data
Handle errors properly
Use shareReplay for expensive operations
Combine streams when needed
Test reactive code

❌ DON'T

Subscribe multiple times to same observable
Forget to unsubscribe
Use nested subscriptions
Ignore error handling
Make observables stateful

Agent Skills: Reactive Programming

Install this agent skill to your local

Skill Files