NGXS State documentation

Question

I'm new to NGXS and I'm trying to fully understand the docs so I can start using it knowing what I'm doing.

There is one thing I don't understand in this code snippet from here.

export class ZooState {
  constructor(private animalService: AnimalService) {}

  @Action(FeedAnimals)
  feedAnimals(ctx: StateContext<ZooStateModel>, action: FeedAnimals) {
    return this.animalService.feed(action.animalsToFeed).pipe(tap((animalsToFeedResult) => {
      const state = ctx.getState();
      ctx.setState({
        ...state,
        feedAnimals: [
          ...state.feedAnimals,
          animalsToFeedResult,
        ]
      });
    }));
  }
}

Just below this code, it says:

You might notice I returned the Observable and just did a tap. If we return the Observable, the framework will automatically subscribe to it for us, so we don't have to deal with that ourselves. Additionally, if we want the stores dispatch function to be able to complete only once the operation is completed, we need to return that so it knows that.

The framework will subscribe to this.animalService.feed, but why?

Answer 1

The action, FeedAnimals, uses the injected service, AnimalService to feed the animals passed in the action's payload. Presumably the service is operates asynchronously and returns an Observable. The value of that Observable is accessed via the tap function and is used to update the ZooState state context based on completing successfully.

In order to use NGXS specifically and Angular in general, you really have to understand RxJS... here's my goto doc page for it