如何更新NgRx返回的Reply数组Observable？无需重新拉取数据

首先要明确：RxJS的操作符是纯函数，不会修改原Observable的数据，你之前直接对replies$调用pipe(map(...))的做法不会生效——因为它只是返回了一个新的Observable，既没订阅也没把结果同步到可观测的状态里。结合你用NgRx的场景，有两种合理的处理方式：

方案一：利用NgRx状态更新（推荐） #

既然用了NgRx，正确的流程应该让Store来管理状态变更：

1. 调用this.storeService.markReplyAsRead(reply.id, this.data)后，对应的Action会触发Reducer更新Store中的replies数组，把指定ID的reply的replyStatus改为READ。
2. 你的replies$是从Store获取的，Store状态更新后，replies$会自动推送新的数组，组件视图会同步更新，不需要手动处理Observable。

如果你的Reducer还没实现这个更新逻辑，补充示例如下：

// 假设这是你的消息模块Reducer
export function messageReducer(state: MessageState = initialState, action: MessageActions): MessageState {
  switch (action.type) {
    case MessageActionTypes.MARK_REPLY_AS_READ:
      return {
        ...state,
        replies: state.replies.map(r => 
          r.id === action.payload.replyId 
            ? {...r, replyStatus: ReplyStatus.READ} // 生成新对象，不修改原数据
            : r
        )
      };
    // 其他Action处理逻辑...
    default:
      return state;
  }
}

此时组件里的方法只需要保留核心调用，无需额外处理replies$：

public markReplyAsRead(reply: Reply): void {
  console.log('id: ', reply.id, reply.replyStatus);
  if (reply.replyStatus === this.replyStatuses.READ) return;

  this.storeService.markReplyAsRead(reply.id, this.data);
}

方案二：组件本地维护状态（特殊场景用） #

如果不想通过Store更新，只想在组件本地修改Observable数据，可以用BehaviorSubject持有当前的replies数组：

1. 定义BehaviorSubject作为状态容器：

private readonly repliesSubject = new BehaviorSubject<Reply[]>([]);
public replies$: Observable<Reply[]> = this.repliesSubject.asObservable();

2. 组件初始化时，订阅Store的replies并同步到Subject：

ngOnInit(): void {
  this.storeService.getMessageReplies().subscribe(replies => {
    this.repliesSubject.next(replies);
  });
}

3. 点击标记已读时，生成新的数组并更新Subject：

public markReplyAsRead(reply: Reply): void {
  console.log('id: ', reply.id, reply.replyStatus);
  if (reply.replyStatus === this.replyStatuses.READ) return;

  // 获取当前数组，生成新数组（保持不可变性）
  const updatedReplies = this.repliesSubject.value.map(r => 
    r.id === reply.id 
      ? {...r, replyStatus: this.replyStatuses.READ} 
      : r
  );
  // 推送新数组，replies$会自动发出新值
  this.repliesSubject.next(updatedReplies);

  // 若需要同步到后端/Store，仍需调用store服务
  this.storeService.markReplyAsRead(reply.id, this.data);
}

关键注意点 #

• 不管哪种方案，都要遵循不可变性原则：不能直接修改原reply对象（比如reply.replyStatus = READ），必须生成新的对象和数组，否则NgRx的变更检测或RxJS的数据流不会触发更新。

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