3d cartoon hands holding a phone

Unlock full course by purchasing a membership

Lesson 6

Dealing with Side Effects

EXTENDED

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');
        },
      });
EXTENDED
Key

Thanks for checking out the preview of this lesson!

You do not have the appropriate membership to view the full lesson. If you would like full access to this module you can view membership options (or log in if you are already have an appropriate membership).