使用RxFire的switchMap与内部Observable时如何避免重复下载数据？

这个问题我之前也碰到过，switchMap + combineLatest的组合在这种场景下确实会导致不必要的重复请求——因为每次Firestore的频道列表更新，整个内部的Observable数组都会被替换，旧的订阅被销毁，新的重新创建，自然会重复拉取RTDB的数据。

核心解决思路是增量处理频道的变化：只给新增的频道创建RTDB订阅，移除频道时取消对应订阅，保留已有频道的活跃订阅。下面是具体的实现方案：

1. 封装频道消息的Observable（可选但推荐） #

先封装一个创建单频道消息Observable的函数，方便复用和添加缓存优化：

interface Channel {
  id: string;
  // 其他频道字段
}

interface Message {
  // 消息字段定义
}

function createChannelMessagesObservable(channel: Channel): Observable<{ channelId: string; messages: Message[] }> {
  return list(getMessagesRef(channel)).pipe(
    // 将消息和对应频道ID绑定，方便后续整合
    map(messages => ({ channelId: channel.id, messages })),
    // 缓存最新的消息数据，避免重复订阅时重新拉取
    shareReplay(1)
  );
}

2. 使用scan维护活跃订阅状态 #

通过scan操作符跟踪当前活跃的频道订阅，对比每次Firestore返回的频道列表，只处理新增和移除的频道：

collection(channelsQuery).pipe(
  // 用scan维护状态：记录当前每个活跃频道的Observable
  scan((prevState, currentChannels) => {
    // 提取前后两次的频道ID集合，方便对比
    const prevChannelIds = new Set(prevState.activeObservables.map(item => item.channelId));
    const currentChannelIds = new Set(currentChannels.map(channel => channel.id));

    // 找出新增的频道：当前列表有但之前没有的
    const addedChannels = currentChannels.filter(channel => !prevChannelIds.has(channel.id));
    // 找出需要移除的频道ID：之前有但当前列表没有的
    const removedChannelIds = [...prevChannelIds].filter(id => !currentChannelIds.has(id));

    // 为新增频道创建Observable
    const newObservables = addedChannels.map(channel => ({
      channelId: channel.id,
      observable: createChannelMessagesObservable(channel)
    }));

    // 保留未被移除的频道Observable，同时自动取消被移除频道的订阅
    const remainingObservables = prevState.activeObservables.filter(item => {
      // 如果该频道被移除，对应的Observable会从列表中删除，RxJS会自动取消其订阅
      return !removedChannelIds.includes(item.channelId);
    });

    // 返回更新后的状态
    return {
      activeObservables: [...remainingObservables, ...newObservables]
    };
  }, { activeObservables: [] as Array<{ channelId: string; observable: Observable<{ channelId: string; messages: Message[] }> }> }),
  // 合并当前所有活跃的频道消息Observable
  switchMap(state => {
    if (state.activeObservables.length === 0) {
      // 没有活跃频道时返回空对象
      return of({} as Record<string, Message[]>);
    }

    // 合并所有Observable，将结果整理为{ [channelId]: messages }的格式
    return combineLatest(state.activeObservables.map(item => item.observable)).pipe(
      map(messageGroups => 
        messageGroups.reduce((acc, group) => {
          acc[group.channelId] = group.messages;
          return acc;
        }, {} as Record<string, Message[]>)
      )
    );
  })
)

方案优势 #

• 增量更新，避免重复下载：只有新增的频道会创建新的RTDB订阅，已有频道的订阅会持续保留，不会因为列表更新而重新拉取数据。
• 自动清理订阅：当频道从Firestore查询结果中移除时，对应的Observable会从活跃列表中删除，RxJS会自动取消其订阅，避免内存泄漏和无用的RTDB监听。
• 缓存优化：通过shareReplay(1)缓存每个频道的最新消息数据，即使有其他地方复用该Observable，也不会重复发起RTDB请求。

为什么原方案会重复下载？ #

原方案中，每次Firestore的频道列表更新，switchMap会取消上一次combineLatest创建的所有订阅，然后重新为全部频道创建新的list Observable——这就导致即使频道没有变化，对应的RTDB数据也会被重新拉取一次，造成冗余读取。

内容的提问来源于stack exchange，提问作者Futuristic Ferret