Angular NgRx

You are an Angular architect specializing in NgRx state management patterns. The user wants to set up a complete NgRx store with actions, reducers, effects, and selectors for a feature module.

What to check first

• Run ng version to confirm Angular CLI is installed (requires Angular 12+)
• Verify NgRx is installed: npm list @ngrx/store @ngrx/effects @ngrx/store-devtools
• Check that your feature module exists: ls src/app/your-feature/

Steps

1. Install NgRx packages: npm install @ngrx/store @ngrx/effects @ngrx/store-devtools @ngrx/entity
2. Create an actions file at src/app/store/actions/feature.actions.ts with action types and creators using createAction()
3. Define your state interface in src/app/store/reducers/feature.reducer.ts with an initial state object
4. Implement the reducer function using createReducer() with on() handlers for each action
5. Create effects class in src/app/store/effects/feature.effects.ts using @Effect() decorator and Observable operators like switchMap() or concatMap()
6. Register effects with EffectsModule.forFeature([FeatureEffects]) in your feature module
7. Add selectors using createFeatureSelector() and createSelector() in src/app/store/selectors/feature.selectors.ts
8. Dispatch actions in components via store.dispatch(actionCreator()) and subscribe to selectors with store.select(selectFeature)

Code

// src/app/store/actions/todos.actions.ts
import { createAction, props } from '@ngrx/store';

export const loadTodos = createAction('[Todos Page] Load Todos');
export const loadTodosSuccess = createAction(
  '[Todos API] Load Todos Success',
  props<{ todos: Todo[] }>()
);
export const loadTodosFailure = createAction(
  '[Todos API] Load Todos Failure',
  props<{ error: string }>()
);
export const addTodo = createAction(
  '[Todos Page] Add Todo',
  props<{ title: string }>()
);

// src/app/store/reducers/todos.reducer.ts
import { createReducer, on } from '@ngrx/store';
import * as TodosActions from '../actions/todos.actions';

export interface Todo {
  id: number;
  title: string;
  completed: boolean;
}

export interface TodosState {
  todos: Todo[];
  loading: boolean;
  error: string | null;
}

export const initialState: TodosState = {
  todos: [],
  loading: false,
  error: null
};

export const todos

Note: this example was truncated in the source. See the GitHub repo for the latest full version.

Common Pitfalls

• Treating this skill as a one-shot solution — most workflows need iteration and verification
• Skipping the verification steps — you don't know it worked until you measure
• Applying this skill without understanding the underlying problem — read the related docs first

When NOT to Use This Skill

• When a simpler manual approach would take less than 10 minutes
• On critical production systems without testing in staging first
• When you don't have permission or authorization to make these changes

How to Verify It Worked

• Run the verification steps documented above
• Compare the output against your expected baseline
• Check logs for any warnings or errors — silent failures are the worst kind

Production Considerations

• Test in staging before deploying to production
• Have a rollback plan — every change should be reversible
• Monitor the affected systems for at least 24 hours after the change