ngrx-store_skill

Overview

This skill scaffolds NgRx Signals Stores for Angular applications to manage reactive state with Signals and RxJS interop. It enforces project patterns for file layout, state interfaces, initial state, computed selectors, methods, and entity support. Use it to create consistent, testable stores that integrate services, async flows, and derived state.

How this skill works

The skill generates a signalStore using withState, withComputed, withMethods and optional withEntities, withHooks, or withProps. It wires rxMethod + tapResponse for Observable-based API calls and uses patchState or entity helpers (addEntity, updateEntity, setAllEntities) to mutate state. It also adds computed selectors, lifecycle hooks, observables for interop, and test scaffolding where applicable.

When to use it

• Creating a new domain store (e.g., items, tasks) and following project folder conventions
• Adding state management or converting existing services to NgRx Signals Stores
• Implementing entity collections with withEntities and entityConfig
• Building async flows that consume Observable APIs via rxMethod
• Adding computed selectors, store-scoped props, or lifecycle hooks to a store

Best practices

• Place store files under src/app/<domain>/data/state/<domain>-store.ts and models under data/models
• Define a clear state interface and initialize defaults to avoid undefined access
• Use rxMethod + tapResponse for API calls to centralize loading/error handling
• Prefer computed for derived values and keep synchronous methods for simple state patches
• Use withEntities and entity helpers for collections to simplify add/update/remove operations
• Provide the store in root or a proper scope and include tests using TestBed and provideZonelessChangeDetection

Example use cases

• ItemStore: list, select, and load items from an ItemService with loading and error state
• TaskStore (entity): manage tasks collection, filters, add/update/delete using entityConfig and setAllEntities
• Store with hooks: call loadItems in onInit to hydrate state automatically
• Store with props: expose loading$ Observable for RxJS consumers and inject services/logger via withProps
• Component integration: inject the store in OnInit components and bind computed selectors in templates