feat: add Angular NgRx best practices documentation

2026-03-08 08:51:02 +01:00
parent 67dc823270
commit 2184971175
47 changed files with 8490 additions and 0 deletions
@@ -0,0 +1,37 @@
+# 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:**
+
+```typescript
+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:**
+
+```typescript
+const selectCounterState = createFeatureSelector<CounterState>("counter");
+export const selectCount = createSelector(selectCounterState, (s) => s.count);
+```
+
+---
@@ -0,0 +1,51 @@
+---
+name: angular-best-practices-ngrx
+description: >-
+  NgRx state management best practices for Angular. Covers pure reducers,
+  action groups, entity adapter, selectors, and signal-based selection.
+  Activates when working with @ngrx/store, @ngrx/effects, and @ngrx/entity.
+  Do not use for Akita, NGXS, or standalone signal-based state.
+  Install alongside angular-best-practices for full coverage.
+license: MIT
+metadata:
+  author: alfredoperez
+  version: "1.2.0"
+tags: [angular, ngrx, state-management, redux]
+globs:
+  - "**/*.ts"
+  - "**/*.reducer.ts"
+  - "**/*.effects.ts"
+  - "**/*.selectors.ts"
+---
+
+# Angular NgRx Best Practices
+
+NgRx state management rules for global state with actions, reducers, effects, and selectors. Use with the core
+[angular-best-practices](https://skills.sh/alfredoperez/angular-best-practices/angular-best-practices)
+skill for comprehensive Angular coverage.
+
+## Links
+
+- [Core Skill: angular-best-practices](https://skills.sh/alfredoperez/angular-best-practices/angular-best-practices)
+- [Browse All Skills](https://skills.sh/alfredoperez/angular-best-practices)
+- [GitHub Repository](https://github.com/alfredoperez/angular-best-practices)
+
+## When to Apply
+
+- Adding or modifying NgRx stores, reducers, or effects
+- Writing selectors for state selection in components
+- Managing collections with `@ngrx/entity`
+
+## Rules
+
+| Rule                  | Impact | Description                                               |
+| --------------------- | ------ | --------------------------------------------------------- |
+| Keep Reducers Pure    | HIGH   | No side effects in reducers; move HTTP calls to Effects   |
+| Use Feature Selectors | MEDIUM | Memoized selectors that recompute only when inputs change |
+
+## Install
+
+Install from [skills.sh/alfredoperez/angular-best-practices](https://skills.sh/alfredoperez/angular-best-practices):
+
+- Core skill: [angular-best-practices](https://skills.sh/alfredoperez/angular-best-practices/angular-best-practices)
+- This add-on: [angular-best-practices-ngrx](https://skills.sh/alfredoperez/angular-best-practices/angular-best-practices-ngrx)