JSPM

  • ESM via JSPM
  • ES Module Entrypoint
  • Export Map
  • Keywords
  • License
  • Repository URL
  • TypeScript Types
  • README
  • Created
  • Published
  • Downloads 11
  • Score
    100M100P100Q29785F
  • License MIT

A schematic to generate NgRx store slices

Package Exports

    This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (ngrx-store-cli) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

    Readme

    NgRx Store CLI

    npm version GitHub

    A schematic for Angular that simplifies the creation of NgRx store slices — including actions, reducers, selectors, and automatic integration with your app-state.ts.


    ✨ Features

    • 🚀 One command to generate full NgRx boilerplate
    • 🧱 Supports both flat and structured folder layouts
    • 🧩 Optional integration with a central app-state.ts file
    • 🧼 Automatically appends reducers + interface to your app state

    📦 Installation

    npm install ngrx-store-cli --save-dev

    🚀 Usage

    Generate a new store slice using command:

    ng generate ngrx-store-cli:store feature-name --actions="actionOne,actionTwo" -a --path=your/path -s
    ng g ngrx-store-cli:store user --actions="load,loadSuccess" -a --path=src/app/store -s

    ✅ Options

    Option Alias Required Description
    --name Name of the feature or slice
    --actions Comma-separated list of action names to generate
    --app-state -a Add this flag to auto-generate and integrate with app-state.ts
    --separate-files -s Add this flag to generate separate folders for actions, reducers, etc.
    --path Target path where files will be generated (default: src/app/store)

    📁 Output Structure

    🔹 Default (No --separate-files)

    src/app/store/user/
    ├── user.actions.ts
    ├── user.reducer.ts
    ├── user.selectors.ts

    🔸 With --separate-files (-s)

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

    📄 app-state.ts Example

    When --app-state(-a) is passed, the schematic:

    • Generates app-state.ts if it doesn't exist
    • Appends your new reducer and interface to it
    import { ActionReducerMap } from '@ngrx/store';
    import { userReducer, UserState } from './user/user.reducer';
    
    export interface AppState {
        user: UserState;
    }
    
    export const reducers: ActionReducerMap<AppState> = {
        user: userReducer
    };

    💡 Tip

    You can pass both --app-state(-a) and --separate-files(-s) to fully customize your state structure.


    📝 License

    MIT


    🤝 Contributions

    PRs welcome!