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 }));