How to trigger subscription on ngxs state select when payload data is the same as the current states value

Question

I'm wondering how to fix this issue.

I have a state model which has a property 'triedSubmitting' set to false as default. Now when a person clicks the submit button I dispatch an action to set state as followed

//The action dispatched from my component
this.store.dispatch(new SetTriedSubmittingOnConfirmationState(true));

//The action in the state itself
@Action(SetTriedSubmittingOnConfirmationState) SetTriedSubmittingOnConfirmationState(state: StateContext<ConfirmationStateModel>, payload: SetTriedSubmittingOnConfirmationState){
    state.setState(patch({triedSubmitting: payload.data}));
}

Now once this action has happened it triggers a subscription on my state select.

@Select(ConfirmationState.triedSubmitting) triedSubmitting$: Observable<boolean>;

this.addSubscription(this.triedSubmitting$
      .pipe(
        map(triedSubmitting => {
          return triedSubmitting;
        })
      ).subscribe(triedSubmitting => {
          if(!!triedSubmitting && !!this.forms){
            this.formControls = new Array<FormControlExtension>();
            this.iterateForms(this.forms);
          }
        }
      ))

This works as expected

However when the user presses the button the second time, the action get's dispatched, the action happens but the subscription never triggers again.

Why is that and am I perhaps using the patch operator in a wrong way here?

Answer 1

The subscription won't get triggered again because the NGXS state hasn't changed - i.e. the value for triedSubmitting was true and is still true so the state Observable doesn't emit a new value.

(From memory) NGXS uses distinctUntilChanged internally so that it minimises the number of changes that subscribers receive.

It sounds like in your use case you are more interested in the action being dispatched, rather than a state changed, so instead of subscribing to the 'ConfirmationState` you could consider using the action stream for notification - see NGXS docs for action handlers