mcpField
R
reactive-programming

reactive-programming

github.com/aj-geddes开发373493 次安装34 周前更新
代码仓库

关于 reactive-programming

面向开发的技能，使用响应式流和 Observable 构建响应迅速的应用，以管理异步数据流。指南涵盖 RxJS 模式，包括防抖搜索、状态管理、重连和背压处理。

主要功能

  1. 01响应式流与 Observable
  2. 02RxJS 基础与自定义操作符
  3. 03防抖搜索模式
  4. 04状态管理与流组合
  5. 05WebSocket 重连与背压处理

适用场景

  1. 01处理复杂异步流程
  2. 02展示实时数据更新
  3. 03使用数据流管理 UI 状态
  4. 04将 WebSocket 或 SSE 事件与其他数据源组合

安装

复制下面的命令，在终端中运行。

$npx skills add https://github.com/aj-geddes/useful-ai-prompts --skill reactive-programming

安装后在 Claude Code 中输入/reactive-programming确认已加载。

包含的文件

除 SKILL.md 外，安装时一起下载的参考资料和脚本。

references/
backpressure-handling.md
combining-multiple-streams.md
custom-operators.md
rxjs-basics.md
search-with-debounce.md
state-management.md
websocket-with-reconnection.md
templates/
component-template.tsx

详细介绍

响应式编程

目录

概述

使用响应式流和可观察对象处理异步数据流，构建响应迅速的应用程序。

适用场景

  • 复杂的异步数据流
  • 实时数据更新
  • 事件驱动架构
  • UI 状态管理
  • WebSocket/SSE 处理
  • 组合多个数据源

快速入门

最简可运行示例：

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)

参考指南

references/ 目录中的详细实现：

指南内容
RxJS 基础RxJS 基础
带防抖的搜索带防抖的搜索
状态管理状态管理
带重连功能的 WebSocket带重连功能的 WebSocket
组合多个流组合多个流
背压处理背压处理
自定义操作符自定义操作符

最佳实践

✅ 应该做
  • 取消订阅以防止内存泄漏
  • 使用操作符转换数据
  • 正确处理错误
  • 对开销较大的操作使用 shareReplay
  • 按需组合数据流
  • 测试响应式代码
❌ 不应该做
  • 多次订阅同一个可观察对象
  • 忘记取消订阅
  • 使用嵌套订阅
  • 忽略错误处理
  • 让可观察对象具有状态

评论

支持 Markdown