createActionGroup doesn't handle discriminated union types correctly

[usarskyy]

Which @ngrx/* package(s) are the source of the bug?

store

Minimal reproduction of the bug/regression with instructions

Playground: https://ngrx-seed-tyhkga.stackblitz.io

Code to reproduce the problem :

import { createAction, createActionGroup, props } from '@ngrx/store';

export const substracted = createAction(
  '[Counter] Value substracted',
  props<{ result: number, status: 'success' } | {status: 'error'}>()
);


export const unionTypesBugActions = createActionGroup(
  {
    source: 'Counter',
    events: {
      'value substracted': props<{ result: number, status: 'success' } | {status: 'error'}>(),
    }
  }
);


const oldStyleSubstractedAction1 = substracted({status: 'success', result: 0});
const oldStyleSubstractedAction2 = substracted({status: 'error'});

const groupStyleSubstractedAction1 = unionTypesBugActions.valueSubstracted({status: 'success', result: 0});
const groupStyleSubstractedAction2 = unionTypesBugActions.valueSubstracted({status: 'error'});

Error:

Minimal reproduction of the bug/regression with instructions

I expect that createActionGroup correctly handles discriminated union types, so TS compiler doesn't complain about conflicts.
Basically, the code below must compile successfully:

import { createAction, createActionGroup, props } from '@ngrx/store';

export const substracted = createAction(
  '[Counter] Value substracted',
  props<{ result: number, status: 'success' } | {status: 'error'}>()
);


export const unionTypesBugActions = createActionGroup(
  {
    source: 'Counter',
    events: {
      'value substracted': props<{ result: number, status: 'success' } | {status: 'error'}>(),
    }
  }
);


const oldStyleSubstractedAction1 = substracted({status: 'success', result: 0});
const oldStyleSubstractedAction2 = substracted({status: 'error'});

const groupStyleSubstractedAction1 = unionTypesBugActions.valueSubstracted({status: 'success', result: 0});
const groupStyleSubstractedAction2 = unionTypesBugActions.valueSubstracted({status: 'error'});

Versions of NgRx, Angular, Node, affected browser(s) and operating system(s)

NgRx: 14.3.2
Angular: 14.2.6
Node: 16

Other information

No response

I would be willing to submit a PR to fix this issue

• Yes
• No

[markostanimirovic]

Good catch @usarskyy!

For now, you can use a props factory for union types:

export const demoActions = createActionGroup({
    source: 'Demo',
    events: {
      'Demo Action': (props: { result: number, status: 'success' } | { status: 'error' }) => props,
    },
});

// works as intended
demoActions.demoAction({ result: 1, status: 'success' });
demoActions.demoAction({ status: 'error' });