'ngxs state composition triggers actions multiple times

I'm trying to use the composition feature for the states. https://www.ngxs.io/advanced/composition

I have one state StateChild extending another state StateParent.

Now if I register both in NgxsModule.forRoot(StateChild, StateParent) then any action in one of these states will be executed twice.

If I only register StateChild then the actions of StateParent seem to act on another state than in State1.

I also had to extend StateChildModel with StateParentModel.

Will the Actions in StateParent then patch StateParentModel or StateChildModel?

(I tried both)

@State<StateChildModel>({
  name: 'statechild',
  defaults: DefaultChildState,
})
@Injectable()
export class ChildState extends ParentStage {

  @Action(LoadProjectsAction)
    loadProjects(stateContext: StateContext<StateChildModel>) {
      return this.projectService.loadProjects().pipe(
        tap((projects) => {
          stateContext.patchState({ projects });
        })
      );
    }
}

@State<StateParentModel>({
  name: 'parentchild',
  defaults: DefaultParentState,
})
@Injectable()
export class ParentStage {

  @Action(LoadUsersAction)
    loadUsers(stateContext: StateContext<StateParentModel>) {
      return this.userService.loadUsers().pipe(
        tap((projects) => {
          stateContext.patchState({ users });
        })
      );
    }
}

Is there any public example around, showing how this should work (including Actions & Selects)?



Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source