What version of Angular is required for these patterns?

This skill is specifically optimized for Angular 17 and above, as it relies on the core Angular Signals API and the modern NgRx SignalStore library.

How are asynchronous operations handled in SignalStore?

It utilizes rxMethod for complex RxJS-based side effects requiring operators like switchMap, and signalMethod for simpler, signal-only asynchronous logic.

How does patchState ensure immutability?

The patchState function handles state transitions by applying partial updates or updater functions to the existing state, ensuring new object references are created without manual spreading.

Does this skill support traditional NgRx Redux patterns?

No, this skill focuses exclusively on the modern SignalStore approach which eliminates the need for traditional actions, reducers, and effects to reduce boilerplate.

Can I use these patterns for global state management?

Yes, SignalStores created with this skill can be provided at the root level for global state or at the component level for scoped, local state management.

Angular NgRx SignalStore Patterns

Name: Angular NgRx SignalStore Patterns
Author: agents-inc

byagents-inc

0•

개발자 도구

Implements high-performance, signal-based state management for Angular applications using modern NgRx SignalStore functional patterns.

This skill provides a comprehensive framework for managing reactive client-side state in Angular 17+ applications by leveraging NgRx SignalStore. It replaces traditional boilerplate-heavy Redux patterns with a functional, composable approach centered on Angular Signals. The skill guides developers through store creation using withState, immutable updates via patchState, standardized entity management, and seamless RxJS integration for side effects. It is designed to ensure optimal performance through fine-grained reactivity while maintaining a clean, maintainable architecture for both local and global state.

주요 기능

01Advanced side-effect handling using rxMethod for RxJS and signalMethod for pure signals

02Reusable store logic through custom signalStoreFeature and context-aware withFeature extensions

03Functional store composition using withState, withComputed, and withMethods

04Reactive derived state implementation using withLinkedState for writable source-tracking

05Standardized entity management with built-in CRUD updaters via withEntities

060 GitHub stars

사용 사례

01Migrating legacy NgRx (Actions/Reducers) to modern Signal-based state management

02Managing local component state with fine-grained reactivity and minimal boilerplate

03Building scalable, reactive dashboards with complex normalized entity collections

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add agents-inc/skills web-state-ngrx-signalstore

For use in Claude.ai and ChatGPT

Download Skill