NGRX-Playground/.agents/skills/angular-best-practices-ngrx/AGENTS.md

Angular Ngrx Best Practices

Use with the core angular-best-practices skill.

---

1. NgRx State Management

Impact: HIGH (Global state)

1.1 Keep Reducers Pure

Impact: HIGH (Predictable state, testable, time-travel debugging)

Reducers must be pure functions: no side effects, no HTTP calls, no subscriptions. Only compute new state from action and current state. Move side effects to Effects.

Example:

on(UsersActions.load, (state) => ({ ...state, loading: true }));
// HTTP call goes in UsersEffects

1.2 Use Feature Selectors

Impact: MEDIUM (Memoized selection, better performance)

Use createFeatureSelector and createSelector for memoized state selection. Selectors only recompute when their inputs change.

Example:

const selectCounterState = createFeatureSelector<CounterState>('counter');
export const selectCount = createSelector(selectCounterState, (s) => s.count);

---