Dennis Hundertmark
38 lines
964 B
Markdown
38 lines
964 B
Markdown
# 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);
|
|
```
|
|
|
|
---
|