RxJS：如何在多个Behavior Subject数据源间切换

The key here is using RxJS's switchMap operator to dynamically switch your table's subscription to the active data source whenever the toggle Observable emits a new value. Since your data sources are BehaviorSubjects, they'll immediately emit their current value when subscribed to—perfect for updating your table right away when switching.

Step-by-Step Implementation #

1. Organize Your Data Sources #

First, map your toggle values to their corresponding BehaviorSubjects. This makes it easy to look up the active source when the toggle changes:

import { BehaviorSubject, Subject, EMPTY } from 'rxjs';
import { switchMap, startWith } from 'rxjs/operators';

// Define your data type (adjust to match your actual data structure)
interface TableData {
  id: number;
  [key: string]: any; // Add other properties as needed
}

// Example BehaviorSubject data sources
const dataSource1$ = new BehaviorSubject<TableData[]>([
  { id: 1, name: 'Source 1 Item 1' },
  { id: 2, name: 'Source 1 Item 2' }
]);
const dataSource2$ = new BehaviorSubject<TableData[]>([
  { id: 1, name: 'Source 2 Item 1' },
  { id: 2, name: 'Source 2 Item 2' }
]);
const dataSource3$ = new BehaviorSubject<TableData[]>([
  { id: 1, name: 'Source 3 Item 1' },
  { id: 2, name: 'Source 3 Item 2' }
]);

// Map toggle values (1, 2, 3...) to their data sources
const sourceLookup = {
  1: dataSource1$,
  2: dataSource2$,
  3: dataSource3$
  // Add more sources here as needed
};

// Your toggle Observable (emits numbers like 1, 2, 3)
const toggle$ = new Subject<number>();

2. Create the Active Data Source Observable #

Use switchMap to switch to the selected source whenever the toggle emits a new value. Add startWith if you want an initial default source:

const activeTableData$ = toggle$.pipe(
  // Optional: Start with a default source (e.g., source 1)
  startWith(1),
  // Switch to the corresponding data source
  switchMap(toggleValue => {
    // Get the source from our lookup map
    const selectedSource = sourceLookup[toggleValue];
    // Fallback to empty observable if no matching source exists
    return selectedSource ? selectedSource : EMPTY;
  })
);

3. Subscribe to Update Your Table #

Subscribe to activeTableData$ to update your table whenever the active source changes or the source itself emits new data:

activeTableData$.subscribe(tableData => {
  // Update your table with the new data
  renderTable(tableData); // Replace with your actual table update logic
});

How It Works #

• switchMap: This operator cancels the previous subscription (to the old data source) and subscribes to the new one whenever the toggle emits a value. This ensures your table only receives data from the currently active source.
• BehaviorSubjects: Since your data sources are BehaviorSubjects, they immediately emit their latest value when switchMap subscribes to them—so your table will update right away when switching sources.
• Scalability: Adding more data sources is as simple as adding a new entry to the sourceLookup object and updating your toggle logic to emit the corresponding number.

Edge Cases to Consider #

• Invalid Toggle Values: The example uses EMPTY as a fallback if the toggle emits a value with no matching source. You could instead return a default source (like dataSource1$) if that makes more sense for your use case.
• Initial State: The startWith operator ensures your table has data to display even before the toggle emits its first value. Remove it if you want the table to stay empty until the first toggle event.

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