
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 ngrxAdd your badge
Show developers this skill is listed on Skillselion. Paste this into your README.
| Installs | 190 |
|---|---|
| repo stars | ★ 6 |
| Last updated | April 4, 2026 |
| Repository | oguzhan18/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
@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