3d cartoon hands holding a phone

Unlock full course by purchasing a membership

Lesson 5

Using Connect with Local Component State

EXTENDED

Using Connect with Local Component State

We have really already learned most of what we need to know about the connect function and how it integrates with our state management approach. This lesson will mostly be a continuation of the last, but this time we will be refactoring the services in the Giflist application that we created.

Once again, if you don’t have that on your computer and want to follow along, you can find it here.

The interesting thing about the Giflist application is that we are also using our state management approach for managing state directly within a component. We will refactor that component to use connect as well as our shared RedditService.

We will not be dealing with any new concepts in this lesson, just practicing them in a different context. So, again, I will encourage you to attempt these refactors yourself and I will post my solution below.

Refactor the GifPlayerComponent

Attempt to refactor the GifPlayerComponent to use the connect function

NOTE: Don’t forget to install ngxtension!

Here are the refactored reducers:

    //reducers
    const nextState$ = merge(
      this.videoLoadStart$.pipe(map(() => ({ status: 'loading' as const }))),
      this.videoLoadComplete$.pipe(map(() => ({ status: 'loaded' as const })))
    );

    connect(this.state)
      .with(nextState$)
      .with(this.togglePlay$, (state) => ({ playing: !state.playing }));
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).