ngrx

Manage Angular state and side effects with NgRx Store, Effects, Entity, and Signal Store.

6|1|Updated Feb 18, 2026
One-click install
npx skills add https://github.com/oguzhan18/angular-ecosystem-skills --skill ngrx
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: ngrx
Source: https://github.com/oguzhan18/angular-ecosystem-skills/tree/main/skills/ngrx
Command: npx skills add https://github.com/oguzhan18/angular-ecosystem-skills --skill ngrx

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

NgRx provides a structured, testable approach to manage complex client-side application state, reduce boilerplate, and centralize asynchronous side effects so teams can reason about state changes and debug reliably.

Core Features & Use Cases

  • Signal Store: Lightweight, signals-based stores to reduce boilerplate while keeping predictable state semantics.
  • Store & Effects: Centralized state with effect-driven async workflows for HTTP calls, navigation, and other side effects.
  • Entity & Data: Adapters and data utilities for normalized collections and automated CRUD integration.
  • Best Practices: Typed actions, pure reducers, memoized selectors, OnPush change detection, and migration guidance from classic patterns to Signal Store.
  • Use Case: Build a product catalog with normalized entities, memoized selectors for list views, and effects handling server synchronization and optimistic updates.

Quick Start

Initialize a typed NgRx store or Signal Store for authentication that uses effects for login flows and an entity adapter for user collections.

Frequently Asked Questions about ngrx

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I manage complex Angular application state and asynchronous side effects?

You can manage complex Angular application state by centralizing data with NgRx Store, handling asynchronous workflows through Effects, and normalizing collections using Entity adapters for predictable, testable state changes.

What is the best way to reduce NgRx boilerplate in modern Angular applications?

Reducing NgRx boilerplate is best achieved by adopting Signal Store, a lightweight, signals-based approach that maintains predictable state semantics while minimizing setup code for modern Angular state management.

How do I handle normalized collections and CRUD operations in Angular state management?

Handle normalized collections and CRUD operations in Angular state management by utilizing NgRx Entity adapters, which automate state updates for product catalogs or user lists and integrate smoothly with memoized selectors.

Can I use Signal Store alongside classic NgRx Store and Effects?

Yes, you can use Signal Store alongside classic NgRx Store and Effects. This Skill supports gradual migration from classic patterns to Signal Store while maintaining typed actions, pure reducers, and effect-driven workflows.

When should I use memoized selectors and OnPush change detection in Angular state management?

Use memoized selectors and OnPush change detection in Angular state management when building list views from normalized entities, ensuring optimal rendering performance and preventing unnecessary change detection cycles.

Does this approach support typed actions and pure reducer constraints for HTTP server synchronization?

Yes, this approach supports typed actions, pure reducer constraints, and effect-driven async workflows specifically designed for HTTP calls, server synchronization, and optimistic updates within Angular applications.