更新 RxJS 中的对象数组答案

【问题标题】：Update array of object in RxJS更新 RxJS 中的对象数组
【发布时间】：2023-02-22 19:33:34
【问题描述】：

我有一个简单的应用程序，用户可以在其中创建会话、加入该会话，然后为该会话创建用户名。当新用户加入会话时，我目前在更新“玩家”（用户）时遇到了一些麻烦。

我的想法是有一个 session observable 可以检测变化，然后将这些变化传递给它的子组件以在 UI 中显示这些变化：

应用程序组件.html

<app-join-session></app-join-session>
<ng-container *ngIf="session$ | async as session">
  <app-current-players [session]="session"></app-current-players>
  <app-new-user [session]="session"></app-new-user>
</ng-container>

会话.service.ts

export class SessionService {
  private subject = new ReplaySubject<Session>();
  public session$ = this.subject.asObservable();

  public setSession(session: Session) {
    this.subject.next(session)
  }

  public addUserToSession(session: Session): void {
    this.subject.next(session)
  }
}

应用程序组件.ts

protected session$ = this.sessionService.session$;

新用户.component.ts

public createUserName(userName: FormControl): void {
  this.apollo.mutate<CreateUser>({
    mutation: userOperations.CREATE_USER,
    variables: {
      name: userName.value,
      sessionId: this.session.id,
    }
  })
  .subscribe({
    next: ({data}) => {
      this.session.players.push(data!.createUser)
      this.sessionService.addUserToSession(this.session)
    },
    error: (e: GraphQLError) => {
      this.errorMessage = {...e}.message;
    }
  })
}

我想也许我可以将创建的用户推送到 players 会话数组并将其提供给 subject.next，这样可观察对象就会更新。

但这不起作用，我收到一个错误：

无法添加属性 19，对象在 Array.push () 处不可扩展

有没有更好/不同的方法来用新播放器更新session流？

【问题讨论】：

标签： angular typescript rxjs

【解决方案1】：

当你有一个包含数组的可观察对象时，你永远不想通过将对象推入数组来改变该数组，你希望始终使可观察对象发出一个新对象。在不改变对象方面，你最好的朋友是传播运算符。我不知道你为什么要使用重播主题，使用行为主题。

subject.next({ ...subject.value, players: [...subject.value.players, newPlayer] })

这将导致 observable 发出一个新的对象和一组新的玩家。

Angular 的基础和使用可观察对象的数据流的一种方式都是关于不改变对象。这是一个很大的话题，但是阅读如何不改变对象并理解 ... 数组和对象的扩展运算符是关键。

这是一个新世界，反应式编程有很多东西要学，但要学会不改变现有对象，而是用变化实例化新对象。这个主题的内容比单个堆栈溢出答案所能回答的要多。

【讨论】：