NgRx Action Group

We use createAction to define NgRx actions in the format of [Source] Event Name. We also would name each actions with mattching cammel case names.

import { createAction, props } from '@ngrx/store';
import { Credentials } from './auth-model';

export const login = createAction(
  '[Auth] Login',
  props<{ credentials: Credentials }>()
);
export const loginSuccess = createAction(
  '[Auth] Login Success',
  props<{ accessToken: string; userName: string }>()
);
export const loginFailure = createAction(
  '[Auth] Login Failure',
  props<{ error: any }>()
);
export const logout = createAction('[Auth] Logout');

Once we crate these actions, we would group then and export in the barrel as AuthActions.

export * from './auth-model';
export * as AuthActions from './auth.actions';
export * from './auth.module';
export * as AuthSelectors from './auth.selectors';

We've got all new createActionGroup in NgRx version 13.2, which makes this simple.

import {
  createAction,
  createActionGroup,
  emptyProps,
  props,
} from '@ngrx/store';
import { Credentials } from './auth-model';

export const AuthActions = createActionGroup({
  source: 'Auth',
  events: {
    Login: props<{ credentials: Credentials }>(),
    'Login Success': props<{ accessToken: string; userName: string }>(),
    'Login Failure': props<{ error: any }>(),
    Logout: emptyProps(),
  },
});

NgRx Action Group

Reference