Now liveThe Skillselion MCP - thousands of ranked skills, loaded into your agent mid-task. No install.Get it →
oguzhan18 avatar

Ngrx

  • 190 installs
  • 6 repo stars
  • Updated April 4, 2026
  • oguzhan18/angular-ecosystem-skills

Add NgRx store, effects, entity adapters, and selectors to Angular apps needing predictable shared state across lazy-loaded feature modules and complex async flows.

About

Angular ecosystem skill for NgRx: guides store architecture, typed actions/reducers, effects, selectors, entity adapters, and module integration so Claude builds maintainable reactive state in enterprise Angular SaaS frontends.

  • Store and feature state setup
  • Actions, reducers, and immutability
  • Effects for async side effects
  • Memoized selectors and facades
  • @ngrx/entity collections

Ngrx by the numbers

  • 190 all-time installs (skills.sh)
  • Ranked #868 of 2,245 Frontend Development skills by installs in the Skillselion catalog
  • Data as of Aug 4, 2026 (Skillselion catalog sync)
npx skills add https://github.com/oguzhan18/angular-ecosystem-skills --skill ngrx

Add your badge

Show developers this skill is listed on Skillselion. Paste this into your README.

Listed on Skillselion
Installs190
repo stars6
Last updatedApril 4, 2026
Repositoryoguzhan18/angular-ecosystem-skills

What it does

Add NgRx store, effects, entity adapters, and selectors to Angular apps needing predictable shared state across lazy-loaded feature modules and complex async flows.

Files

SKILL.mdMarkdownGitHub ↗

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

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

References: Docs — guides, API • GitHubGitHub 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

Related skills

This week in AI coding

Five minutes, every Monday - the tools, releases and tactics for developers.

unsubscribe anytime.