mcpField
N
ngrx

ngrx

github.com/oguzhan18Development7195 installsUpdated 31w ago
Repository

About ngrx

A reference skill for using NgRx state-management libraries in Angular applications. It covers Store, Effects, Entity, and Signal Store patterns, including practices for side effects and normalized state.

Key features

  1. 01Manage state with Signal Store
  2. 02Handle side effects with Effects
  3. 03Manage entity collections
  4. 04Use typed actions and selectors
  5. 05Keep reducers pure and synchronous

Use cases

  1. 01Structure state in Angular applications
  2. 02Handle HTTP calls and navigation effects
  3. 03Manage CRUD operations on entities

Install

Copy the command and run it in a terminal.

$npx skills add https://github.com/oguzhan18/angular-ecosystem-skills --skill ngrx

After installing, type/ngrxin Claude Code to confirm it loaded.

Bundled files

References and scripts installed along with SKILL.md.

references/discussions/
_INDEX.md
references/docs/
_INDEX.md
references/issues/
_INDEX.md
references/releases/
_INDEX.md

Details

From the project README

@ngrx/store, @ngrx/effects, @ngrx/entity, @ngrx/signals

Version: 19.0.0 (2025) Tags: State Management, Redux, Reactive, Store, Effects

References: Docs — guides, API • GitHub • GitHub Issues

API Changes

This section documents recent version-specific API changes.

  • NEW: NgRx Signal Store — Modern, lightweight state management with Signals API, reducing boilerplate significantly source

  • NEW: Functional Effects — Modern approach to creating effects using functional programming patterns

  • NEW: withEntities — Entity management for Signal Store, simplifies CRUD operations on collections

  • NEW: @ngrx/data — Simplifies entity CRUD operations with automatic HTTP integration

  • DEPRECATED: Classic NgRx patterns — Consider migrating to Signal Store for new projects

Best Practices

  • Use NgRx Signal Store for new projects — Combines NgRx structure with Signals performance
import { signalStore, withState, withMethods, withHooks } from '@ngrx/signals';

export const AuthStore = signalStore(
  withState({ user: null, isAuthenticated: false }),
  withMethods((store, authService = inject(AuthService)) => ({
    login(credentials: Credentials) {
      authService.login(credentials).pipe(
        tap(user => store.user.set(user))
      ).subscribe();
    }
  })),
  withHooks({
    onInit() {
      // Initialize store
    }
  })
);
  • Use Entity Adapter for collections — Simplifies CRUD operations on entity collections
import { createEntityAdapter, EntityState } from '@ngrx/entity';

export interface Product extends EntityState<Product> {
  // Additional state properties
}

export const adapter = createEntityAdapter<Product>({
  selectId: (product) => product.id
});
  • Keep reducers pure and synchronous — Never perform async operations in reducers

  • Use Effects for side effects — Handle HTTP calls, navigation, and other async operations in effects

  • Use strongly typed actions — Create action groups for better type safety

  • Normalize state for complex data — Store entities in dictionaries indexed by ID

  • Use memoized selectors — Prevent unnecessary re-computations

  • Use ChangeDetectionStrategy.OnPush — Work well with reactive state

Comments

Markdown supported