ngrx/data error$ stream - ignore previous value

Question

I an using ngrx/data in my app and am trying to figure out how to use the error$ stream to display an error in a component. Basically I am using a modal pop up with a form to create an entity and I am using the error$ stream to display any error that occurs when saving it. The problem I am having is that if an error occurs and it is displayed and the pop up is closed the next time it is opened the previous error is displayed. This is the code for the error$ selector

    this.entityActionErrors$ = actions.pipe(
      filter(
        (ea: EntityAction) =>
          ea.payload &&
          ea.payload.entityOp &&
          ea.payload.entityOp.endsWith(OP_ERROR)
      ),
      shareReplay(1)
    );

The problem is with the shareReplay(1). I am trying to figure how to ignore or filter out the previous error when the modal is reopened and the error$ stream is subscribed to again.

Is there a way in rxjs to ignore or filter out the previous emission from a sharedReplay subject?

Answer 1

The solution I came up with was to use a separate Subject for the error message. I did this in the service class I created for the entity.

export class VolunteersService extends EntityCollectionServiceBase<Volunteer> {
  constructor(factory: EntityCollectionServiceElementsFactory) {
    super('Volunteer', factory);

    this.errors$
      .pipe(
        filter(
          (ea: EntityAction) =>
            ea.payload.entityName === 'Volunteer' &&
            ea.payload.entityOp === EntityOp.SAVE_ADD_ONE_ERROR
        )
      )
      .subscribe(() => this._addErrorSubject.next('We couldn\'t save your changes at the moment. Please try again later.'));
  }

  private _addErrorSubject = new Subject<string>();

  get addError$(): Observable<string> {
    return this._addErrorSubject;
  }
}

The problem I was trying to solve was the problem of local component state so while this does work I decided on a different solution. In ngrx/data all of the command methods in the EntityCollectionServiceBase class return an Observable that emits after the store has been updated. So in the component I subscribe to the command method like:

  save() {
    this._pending = true;
    this.volunteersService.add(volunteer).subscribe(
      () => {
        this._pending = false;
      },
      error => {
        this._pending = false;
        this._error = error.message;
      }
    );
  }

This solution works perfectly and keeps this state in the component where it belongs and out of the store.

Answer 2

Skipping stored value is simple:
errors$.pipe(skipUntil(timer(0)));.
It works because stored value is provided synchronously.
You can also play with asyncScheduler.