Reactive Programming

aj-geddes/useful-ai-prompts/skills/reactive-programming

作者 aj-geddes3f5182cfd739無授權條款355 個星標收錄於 2026年10月8日更新於 2026年10月8日儲存庫7 個月前更新

Implement reactive programming patterns using RxJS, streams, observables, and backpressure handling. Use when building event-driven UIs, handling async data streams, or managing complex data flows.

僅含說明Software Development

AI 產生的概覽

指導使用 RxJS、可觀察物件、資料流與背壓處理來實作反應式程式設計模式。

功能: 此技能提供使用 RxJS 建構事件驅動應用程式的說明與參考指南，涵蓋可觀察物件、操作符、Subject、防抖搜尋、狀態管理、WebSocket 重新連線、多串流合併、背壓處理與自訂操作符，並附帶一個元件範本。它產出的是指引與程式碼範例，而非執行指令碼。
適用情境: 適用於建構事件驅動介面、處理非同步資料流、管理複雜資料流，或處理 WebSocket、SSE 等即時更新的情境。
執行需求: 不附指令碼，僅為說明與參考文件。使用其中的範例需要具備 TypeScript/JavaScript 專案並安裝 RxJS 套件。

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:

typescript

import {  Observable,  Subject,  BehaviorSubject,  fromEvent,  interval,} from "rxjs";import {  map,  filter,  debounceTime,  distinctUntilChanged,  switchMap,} from "rxjs/operators";
// Create observable from arrayconst 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)

import {  Observable,  Subject,  BehaviorSubject,  fromEvent,  interval,} from "rxjs";import {  map,  filter,  debounceTime,  distinctUntilChanged,  switchMap,} from "rxjs/operators";
// Create observable from arrayconst 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 [blocked]	RxJS Basics
Search with Debounce [blocked]	Search with Debounce
State Management [blocked]	State Management
WebSocket with Reconnection [blocked]	WebSocket with Reconnection
Combining Multiple Streams [blocked]	Combining Multiple Streams
Backpressure Handling [blocked]	Backpressure Handling
Custom Operators [blocked]	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

來源與署名

來源：aj-geddes/useful-ai-prompts位於skills/reactive-programming提交3f5182c

授權條款：無授權條款

內容歸原作者所有。SourceWeft 從公開儲存庫中收錄這些內容。

檢舉或申請下架

更多來自 aj-geddes/useful-ai-prompts 的技能

Xss Prevention

aj-geddes

Prevent Cross-Site Scripting (XSS) attacks through input sanitization, output encoding, and Content Security Policy. Use when handling user-generated content in web applications.

待分類3557 個月前更新

Wireframe Prototyping

aj-geddes

Create wireframes and interactive prototypes to visualize user interfaces and gather feedback early. Use tools and techniques to communicate design ideas before development.

待分類3557 個月前更新

Web Performance Optimization

aj-geddes

透過程式碼分割、延遲載入、快取、壓縮與監控來指導 Web 效能最佳化。

Software Development3557 個月前更新

Vue Application Structure

aj-geddes

指導使用組合式 API、元件組織與 TypeScript 來建構 Vue 3 應用程式結構。

Software Development3557 個月前更新

Visual Regression Testing

aj-geddes

透過跨版本比較截圖來偵測 UI 中非預期的視覺變化，指導視覺回歸測試。

Software Development3557 個月前更新

User Persona Creation

aj-geddes

依據研究建立詳細的使用者人物誌，用來指引產品設計、優先順序與訊息溝通。

Research & Analysis3557 個月前更新

更多Software Development技能

Playground

anthropics

精選

建立自成一體的互動式 HTML 遊樂場，包含控制項、即時預覽與可複製的提示詞輸出。

Software Development37K今天更新

M5 Onboard

anthropics

精選

透過 USB 偵測 M5Stack ESP32 開發板，燒錄 UIFlow 2.0 韌體並安裝 MicroPython 應用程式套件。

Software Development37K今天更新

Cardputer Buddy

anthropics

精選

指導迭代 Cardputer-Adv 的 MicroPython 應用程式套件：新增應用程式、透過 USB 序列埠推送檔案、查看日誌並執行 REPL 指令。

Software Development37K今天更新

Web Design Guidelines

vercel-labs

精選

依據從遠端來源取得的 Web Interface Guidelines 審查 UI 程式碼，並以 file:line 形式回報問題。

Software Development32K5 週前更新

Vercel React Native Skills

vercel-labs

精選

React Native 與 Expo 最佳實務規則，涵蓋清單效能、動畫、導覽、UI 模式、狀態與 monorepo 設定。

Software Development32K5 週前更新

Vercel React Best Practices

vercel-labs

精選

Vercel 的 React 與 Next.js 效能指南，以 70 條規則的形式用於撰寫、審查與重構程式碼。

Software Development32K5 週前更新

Reactive Programming

Reactive Programming

Table of Contents

Overview

When to Use

Quick Start

Reference Guides

Best Practices

✅ DO

❌ DON'T

來源與署名

更多來自 aj-geddes/useful-ai-prompts 的技能

Xss Prevention

Wireframe Prototyping

Web Performance Optimization

Vue Application Structure

Visual Regression Testing

User Persona Creation

更多Software Development技能

Playground

M5 Onboard

Cardputer Buddy

Web Design Guidelines

Vercel React Native Skills

Vercel React Best Practices