feat: add Angular NgRx best practices documentation
This commit is contained in:
@@ -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);
|
||||
```
|
||||
|
||||
---
|
||||
Reference in New Issue
Block a user