tessl/npm-ngrx--schematics

Angular CLI schematics for generating NgRx state management code including actions, reducers, effects, selectors, and feature modules.

—

Pending

Quality

Pending

Does it follow best practices?

Impact

Pending

No eval scenarios have been run

Securityby

Pending

The risk profile of this skill

Overview

Eval results

Files

Action Generation

Name: tessl/npm-ngrx--schematics
Author: tessl

NgRx action generation schematic that creates type-safe action classes with proper typing and optional API action patterns for success/failure scenarios. Actions are the primary way to express state changes and trigger side effects in NgRx applications.

Capabilities

Action Schematic

Generates NgRx action definitions using the createAction function with type safety and payload support.

# Basic action generation
ng generate @ngrx/schematics:action User

# API action pattern (success/failure actions)
ng generate @ngrx/schematics:action User --api

# Grouped actions in actions folder
ng generate @ngrx/schematics:action User --group

/**
 * Action schematic configuration interface
 */
interface ActionSchema {
  /** Name of the actions (typically entity or feature name) */
  name: string;
  /** Prefix for action type strings */
  prefix?: string;
  /** Path where action files should be generated */
  path?: string;
  /** Angular project to target */
  project?: string;
  /** Generate files without creating a folder */
  flat?: boolean;
  /** Group action files within 'actions' folder */
  group?: boolean;
  /** Generate API success and failure actions */
  api?: boolean;
}

Basic Action Generation

Creates standard action definitions using NgRx's createAction function.

// Generated basic actions
import { createAction, props } from '@ngrx/store';

export const loadUsers = createAction('[User] Load Users');

export const loadUsersSuccess = createAction(
  '[User] Load Users Success',
  props<{ users: User[] }>()
);

export const loadUsersFailure = createAction(
  '[User] Load Users Failure',
  props<{ error: string }>()
);

Usage Examples:

# Generate user actions
ng generate @ngrx/schematics:action User --prefix="User Page"

# Generate product actions with custom path
ng generate @ngrx/schematics:action Product --path=src/app/catalog --prefix="Product"

API Action Pattern

When using --api flag, generates complete API action patterns including loading, success, and failure actions.

// Generated API actions with --api flag
import { createAction, props } from '@ngrx/store';

// Load actions
export const loadUsers = createAction('[User/API] Load Users');

export const loadUsersSuccess = createAction(
  '[User/API] Load Users Success',
  props<{ users: User[] }>()
);

export const loadUsersFailure = createAction(
  '[User/API] Load Users Failure',
  props<{ error: any }>()
);

// Create actions
export const createUser = createAction(
  '[User/API] Create User',
  props<{ user: User }>()
);

export const createUserSuccess = createAction(
  '[User/API] Create User Success',
  props<{ user: User }>()
);

export const createUserFailure = createAction(
  '[User/API] Create User Failure',
  props<{ error: any }>()
);

// Update actions
export const updateUser = createAction(
  '[User/API] Update User',
  props<{ user: Update<User> }>()
);

export const updateUserSuccess = createAction(
  '[User/API] Update User Success',
  props<{ user: User }>()
);

export const updateUserFailure = createAction(
  '[User/API] Update User Failure',
  props<{ error: any }>()
);

// Delete actions
export const deleteUser = createAction(
  '[User/API] Delete User',
  props<{ id: string }>()
);

export const deleteUserSuccess = createAction(
  '[User/API] Delete User Success',
  props<{ id: string }>()
);

export const deleteUserFailure = createAction(
  '[User/API] Delete User Failure',
  props<{ error: any }>()
);

Usage Examples:

# Generate complete API action set
ng generate @ngrx/schematics:action Product --api --prefix="Product API"

# Generate API actions with grouping
ng generate @ngrx/schematics:action Order --api --group --prefix="Order"

Action Type Conventions

The schematic follows NgRx action type conventions with proper categorization:

/**
 * Action type string format: [Source] Event
 * Examples:
 * - [User List] Load Users
 * - [User API] Load Users Success
 * - [User Detail] Select User
 */
interface ActionTypeConvention {
  source: string;    // Component, service, or API source
  event: string;     // What happened
  outcome?: string;  // Success, Failure, etc.
}

File Structure Options

The schematic provides flexible file organization:

Flat Structure (--flat):

src/app/user/
├── user.actions.ts
├── user.reducer.ts
└── user.effects.ts

Grouped Structure (--group):

src/app/user/
├── actions/
│   └── user.actions.ts
├── reducers/
│   └── user.reducer.ts
└── effects/
    └── user.effects.ts

Default Structure:

src/app/user/
└── user/
    ├── user.actions.ts
    ├── user.reducer.ts
    └── user.effects.ts

Props and Payload Types

The generated actions include proper TypeScript typing for payloads:

// Actions with typed payloads
export const selectUser = createAction(
  '[User] Select User',
  props<{ userId: string }>()
);

export const updateUserFilter = createAction(
  '[User] Update Filter',
  props<{ filter: UserFilter }>()
);

export const clearUsers = createAction('[User] Clear Users');

// Complex payload types
export const searchUsers = createAction(
  '[User] Search Users',
  props<{
    query: string;
    filters: UserSearchFilters;
    pagination: PaginationOptions;
  }>()
);

Action Creators

The schematic generates action creators that can be imported and used throughout the application:

/**
 * Generated action creators for dispatch and type checking
 */
interface ActionCreators {
  [actionName: string]: ActionCreator;
}

// Usage in components and effects
import * as UserActions from './user.actions';

// Dispatch actions
this.store.dispatch(UserActions.loadUsers());
this.store.dispatch(UserActions.selectUser({ userId: '123' }));

Integration with Effects

Generated actions are designed to work seamlessly with NgRx Effects:

// Example effect using generated actions
@Injectable()
export class UserEffects {
  loadUsers$ = createEffect(() =>
    this.actions$.pipe(
      ofType(UserActions.loadUsers),
      switchMap(() =>
        this.userService.getUsers().pipe(
          map(users => UserActions.loadUsersSuccess({ users })),
          catchError(error => of(UserActions.loadUsersFailure({ error })))
        )
      )
    )
  );
}

Barrel Exports

The schematic updates index.ts files to export all generated actions:

// Generated barrel exports
export * from './user.actions';
export * from './user.reducer';
export * from './user.selectors';
export * from './user.effects';

Testing Support

Generated actions are fully testable and include proper type checking:

// Example action tests
describe('User Actions', () => {
  it('should create loadUsers action', () => {
    const action = UserActions.loadUsers();
    expect(action.type).toBe('[User] Load Users');
  });

  it('should create loadUsersSuccess action with payload', () => {
    const users = [{ id: '1', name: 'John' }];
    const action = UserActions.loadUsersSuccess({ users });
    expect(action.type).toBe('[User] Load Users Success');
    expect(action.users).toEqual(users);
  });
});