CtrlK
BlogDocsLog inGet started
Tessl Logo

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

SecuritybySnyk

Pending

The risk profile of this skill

Overview
Eval results
Files

store-setup.mddocs/

Store Setup

NgRx store initialization schematic that sets up the foundational NgRx store configuration in your Angular application. It handles both root store setup and feature store configuration with proper module imports and development tools integration.

Capabilities

Store Schematic

Creates the initial NgRx store setup with configurable options for root or feature stores.

# Root store setup (application-wide)
ng generate @ngrx/schematics:store AppState --root

# Feature store setup
ng generate @ngrx/schematics:feature-store UserState --module=user
/**
 * Store schematic configuration interface
 */
interface StoreSchema {
  /** Name of the state (optional for root store) */
  name?: string;
  /** Path where store files should be generated */
  path?: string;
  /** Angular project to target */
  project?: string;
  /** Generate files without creating a folder */
  flat?: boolean;
  /** When true, does not create test files */
  skipTests?: boolean;
  /** Module file to import the store into */
  module?: string;
  /** Path to the state files relative to module */
  statePath?: string;
  /** Whether this is a root store setup */
  root?: boolean;
  /** Name of the state interface (defaults to 'State') */
  stateInterface?: string;
  /** Generate minimal store setup without boilerplate */
  minimal?: boolean;
}

Root Store Configuration

Sets up the application-wide store with StoreModule.forRoot() and optional development tools.

// Generated root store module registration
import { StoreModule } from '@ngrx/store';
import { StoreDevtoolsModule } from '@ngrx/store-devtools';
import { isDevMode } from '@angular/core';
import { reducers, metaReducers } from './state';

@NgModule({
  imports: [
    StoreModule.forRoot(reducers, { metaReducers }),
    isDevMode() ? StoreDevtoolsModule.instrument() : []
  ]
})
export class AppModule {}

Usage Examples:

# Basic root store setup
ng generate @ngrx/schematics:store --root --name=AppState

# Minimal root store (no boilerplate files)
ng generate @ngrx/schematics:store --root --minimal

# Root store with custom state interface name
ng generate @ngrx/schematics:store --root --stateInterface=GlobalState

Feature Store Configuration

Sets up feature-specific stores with StoreModule.forFeature() for modular state management.

// Generated feature store module registration
import { StoreModule } from '@ngrx/store';
import * as fromUser from './state';

@NgModule({
  imports: [
    StoreModule.forFeature(
      fromUser.userFeatureKey,
      fromUser.reducers,
      { metaReducers: fromUser.metaReducers }
    )
  ]
})
export class UserModule {}

Usage Examples:

# Feature store setup
ng generate @ngrx/schematics:store User --module=user/user.module.ts

# Feature store with custom path
ng generate @ngrx/schematics:store Product --path=src/app/catalog --module=catalog.module.ts

Generated File Structure

The store schematic generates the following file structure:

Root Store (--root):

src/app/state/
├── index.ts              # Barrel exports
├── app.state.ts          # Root state interface
├── app.reducer.ts        # Root reducer map
└── app.effects.ts        # Root effects array

Feature Store:

src/app/feature-name/state/
├── index.ts              # Barrel exports
├── feature.state.ts      # Feature state interface
├── feature.reducer.ts    # Feature reducer
├── feature.actions.ts    # Feature actions
├── feature.effects.ts    # Feature effects
└── feature.selectors.ts  # Feature selectors

Module Integration

The schematic automatically updates the specified module file to include the necessary imports:

/**
 * Adds StoreModule import to the specified NgModule
 * @param modulePath - Path to the module file to update
 * @param storeConfig - Store configuration (forRoot or forFeature)
 * @param imports - Additional imports to add
 */
function addStoreToModule(
  modulePath: string,
  storeConfig: string,
  imports: string[]
): void;

State Interface Generation

Creates TypeScript interfaces for type-safe state management:

// Root state interface
export interface AppState {
  // Feature states will be added here
}

// Feature state interface
export interface UserState {
  users: User[];
  loading: boolean;
  error: string | null;
}

// Feature key for store registration
export const userFeatureKey = 'user';

Development Tools Integration

When generating a root store, the schematic automatically includes NgRx DevTools configuration:

// Generated development tools setup
import { StoreDevtoolsModule } from '@ngrx/store-devtools';
import { isDevMode } from '@angular/core';

@NgModule({
  imports: [
    // Other imports...
    isDevMode() ? StoreDevtoolsModule.instrument({
      maxAge: 25, // Retains last 25 states
      logOnly: !isDevMode(), // Restrict extension to log-only mode
      autoPause: true, // Pauses recording actions and state changes when the extension window is not open
    }) : []
  ]
})
export class AppModule {}

Meta Reducers Support

The schematic includes meta reducer configuration for cross-cutting concerns:

// Generated meta reducers
import { MetaReducer } from '@ngrx/store';

export const metaReducers: MetaReducer<AppState>[] = isDevMode() ? [] : [];

Error Handling

The store schematic includes proper error handling and validation:

  • Validates that the specified module file exists
  • Ensures proper TypeScript syntax in generated files
  • Handles both Angular module and standalone application setups
  • Provides helpful error messages for configuration issues

docs

action-generation.md

component-store.md

container-components.md

data-services.md

effect-generation.md

entity-management.md

feature-generation.md

index.md

ngrx-push-migration.md

reducer-generation.md

selector-generation.md

store-setup.md

utility-functions.md

tile.json