Dealing with Side Effects

In this lesson, we are going to look at a rather interesting case that we will bump into in our next application build and how it interacts with connect. This is something that is going to generally occur when the purpose of a subscription is essentially to just trigger something else.

See if you notice anything weird about this connect set up:

  constructor() {
    // reducers
    const nextState$ = merge(
      this.messages$.pipe(map((messages) => ({ messages }))),
      this.logout$.pipe(map(() => ({ messages: [] }))),
      this.error$.pipe(map((error) => ({ error }))),
      this.add$.pipe(
        exhaustMap((message) => this.addMessage(message)),
        ignoreElements(),
        catchError((error) => of({ error }))
      )
    );

    connect(this.state).with(nextState$);
  }

Pretty standard… except for this:

      this.add$.pipe(
        exhaustMap((message) => this.addMessage(message)),
        ignoreElements(),
        catchError((error) => of({ error }))
      )

For context, this is what this would have looked like if we were not using connect:

    this.add$
      .pipe(
        takeUntilDestroyed(),
        exhaustMap((message) => this.addMessage(message))
      )
      .subscribe({
        error: (err) => {
          console.log(err);
          this.error$.next('Failed to send message');
        },
      });