RXJS中如何从BehaviorSubject类型的数组中删除元素？

你当前直接调用getValue()取值后过滤再next()的写法确实不符合RXJS的响应式设计规范，主要问题有两点：

• getValue()是同步命令式取值，脱离了RXJS的数据流管控，存在异步场景下拿到过期状态的风险
• 状态更新逻辑和业务代码耦合，不利于后续复用和维护

推荐实现方案 #

方案1：完全响应式写法（最推荐） #

通过scan操作符封装状态更新逻辑，完全遵循RXJS数据流设计，无需手动调用next更新BehaviorSubject：

import { merge, Subject, shareReplay, scan, withLatestFrom, map, take } from 'rxjs';
import { UserService } from './user.service';

// 1. 定义各类状态变更的触发器
// 删除用户触发器，传要删除的用户id
private deleteUserById$ = new Subject<number>();
// 初始化用户列表触发器（比如接口请求）
private initUsers$ = this.userService.getUsers();

// 2. 组合所有状态变更逻辑，输出最终的用户流
public users$ = merge(
  // 处理初始化赋值
  this.initUsers$,
  // 处理删除逻辑
  this.deleteUserById$.pipe(
    withLatestFrom(this.users$),
    map(([idToRemove, currentUsers]) => currentUsers.filter(u => u.id !== idToRemove))
  )
).pipe(
  // 缓存最新值，替代原有的BehaviorSubject，多播给所有订阅者
  shareReplay(1)
);

// 3. 调用删除的方式：传入要删除的用户id即可自动触发状态更新
removeUser(id: number) {
  this.deleteUserById$.next(id);
}

方案2：保留BehaviorSubject的改进写法 #

如果你必须保留现有的BehaviorSubject定义，可以改用订阅流的方式获取最新值，替代getValue()：

// 原有定义不变
public users = new BehaviorSubject<User[]>([]);

removeUser(idRemove: number) {
  this.users.pipe(
    // 只取一次当前最新值，自动结束订阅
    take(1),
    map(users => users.filter(u => u.id !== idRemove))
  ).subscribe(filteredUsers => this.users.next(filteredUsers))
}

注意：这种写法仅适合小范围临时修改的场景，长期维护还是更推荐方案1的响应式写法

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