skillZs
★ LIVE SKILL TAGS ★
>>> LIVE SKILLS INDEX <<<
* OPEN SOURCE *
NO LOGIN, NO TRACKING
※ REAL INSTALL DATA ※
← back to all skills
oguzhan18/angular-ecosystem-skills192 installs

ngrx

ALWAYS use when implementing Angular state management with NgRx, including Store, Effects, Entity, and Signal Store.

How do I install this agent skill?

npx skills add https://github.com/oguzhan18/angular-ecosystem-skills --skill ngrx
view source ↗

Is this agent skill safe to install?

  • Gen Agent Trust Hubpass

    The skill provides documentation, API references, and best practices for the NgRx state management library in Angular. It contains no executable code, no network operations, and no sensitive data access. All external links point to official project documentation or trusted community resources.

  • Socketpass

    No alerts

  • Snykwarn

    Risk: MEDIUM · 1 issue

What does this agent skill do?

@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

Add the canonical catalog link to the repository README so users can inspect current installs and available audits. The publishing guide covers the complete discovery path.

<a href="https://skillzs.dev/skills/oguzhan18/angular-ecosystem-skills/ngrx">View ngrx on skillZs</a>