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 ngrxIs 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
How can the creator link this skill?
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>