reactive-programming logo

reactive-programming

reactive programming

aj-geddes/useful-ai-prompts372installs245stars

SKILL.md

Full skill instructions

Reactive Programming

Table of Contents

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:

GuideContents
RxJS BasicsRxJS Basics
Search with DebounceSearch with Debounce
State ManagementState Management
WebSocket with ReconnectionWebSocket with Reconnection
Combining Multiple StreamsCombining Multiple Streams
Backpressure HandlingBackpressure Handling
Custom OperatorsCustom 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