Add ability to generate actions with createActionGroup using schematics

[billyjov]

Information

We are currently be able to generate actions using schematics.

https://ngrx.io/guide/schematics/action

The generated file contains all actions like this:

export const loadBooks = createAction(
  '[Books] Load Books'
);

export const loadBooksSuccess = createAction(
  '[Books] Load Books Success',
  props<{ books: Book[] }>()
);

export const loadBooksFailure = createAction(
  '[Books] Load Books Failure',
  props<{ error: any }>()
);

It will be helpful if the developer have the ability to group them using the new createActionGroup function to reach following result directly during file generation.

export const BooksActions = createActionGroup({
  source: 'Books',
  events: {
    'Load Books': emptyProps(),
    'Load Books Success': props<{ books: Book[] }>(),
    'Load Books Failure': props<{ error: any }>(),
  }
})

Proposal

ng generate action ActionName --group is already use to group actions within files an alternative can be

• ng generate action ActionName --compact or
• ng generate action ActionName --action-group or
• ng generate action ActionName --minimal or ... any other proposal? Does this make sense?

Describe any alternatives/workarounds you're currently using

No response

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

• [X] Yes
• [ ] No

[brandonroberts]

Good idea. I'd like to take this a step further and make createActionGroup the default when using schematics to generate actions/features

[timdeschryver]

@brandonroberts I think that would be great, but maybe with that until we release v15?

[brandonroberts]

Yep, we can pick this back up after the last 14.x release

[danielkleebinder]

I truely like the idea, however, the source property should probably be optional to give opportunity for better actions hygiene. For example:

export const BooksActions = createActionGroup({
  events: {
    '[Books List Page] Load Books': emptyProps(),
    '[Books API] Load Books Success': props<{ books: Book[] }>(),
    '[Books API] Load Books Failure': props<{ error: any }>(),
  }
});

[timdeschryver]

@danielkleebinder that isn't possible. createActionGroup requires a source, and the event description doesn't accept string values with [ or ].

The actions should be combined per source, in your example this becomes booksListPageActions and booksApiActions. This still follows the best practices because actions are grouped, and are prefixed with the source of the group.

[danielkleebinder]

@timdeschryver I see, thank you for you response!

[jkyoutsey]

As a note, the keys in the events configuration violate default eslint rules: /* eslint-disable @typescript-eslint/naming-convention */ It might be nice if the schematic block disabled this section.

export const ThingActions = createActionGroup({
	source: 'Things',
	events: {
		/* eslint-disable @typescript-eslint/naming-convention */
		'Load Things': emptyProps(),
		'Load Things Success': props<{ things: Thing[] }>(),
		'Load Things Failure': emptyProps(),
		/* eslint-enable @typescript-eslint/naming-convention */
	},
});

[raphaelammann]

Is there a way to still use the old schematics which used createAction instead of the new createActionGroup ?