Does this skill support the latest Angular v20 features?

Yes, it includes patterns for withLinkedState for derived writable state and withFeature for creating context-aware reusable store functionality.

Can I still use RxJS with the SignalStore?

Yes, you should use rxMethod from @ngrx/signals/rxjs-interop to handle complex asynchronous flows like debouncing or switchMap while maintaining full compatibility with the signal-based store.

When should I use SignalStore over traditional NgRx?

SignalStore is preferred for modern Angular 17+ applications where you want to reduce boilerplate and utilize fine-grained reactivity without the complexity of traditional Actions, Reducers, and Effects.

How do I ensure state remains immutable in SignalStore?

You must always use the patchState() function for updates. This skill enforces patterns that prevent direct mutation and utilizes NgRx's internal protections to maintain state integrity.

What is the best way to handle collections of data?

Use the withEntities() feature from @ngrx/signals/entities. it provides a standardized structure for managing collections with built-in CRUD updaters like addEntity and updateEntity.

NgRx SignalStore for Angular

Name: NgRx SignalStore for Angular
Author: agents-inc

byagents-inc

0•

開発者ツール

Implements high-performance, signal-based state management patterns for Angular 17+ applications using the NgRx SignalStore library.

The NgRx SignalStore skill provides a comprehensive architectural blueprint for building scalable, reactive Angular applications using functional state management. It guides the creation of composable stores that leverage Angular Signals for optimal performance while eliminating traditional Redux-style boilerplate like actions and reducers. From handling complex entity collections with normalized structures to integrating sophisticated RxJS side effects via rxMethod, this skill ensures your application state architecture follows modern industry standards, maintains immutability, and remains easy to test and debug.

主な機能

01Automated enforcement of immutable state updates through patchState and deep-freezing

02Functional store composition using withState, withComputed, and withMethods

03Advanced reactivity patterns including withLinkedState and withFeature for Angular v20+

040 GitHub stars

05Standardized entity management for efficient CRUD operations and lookups

06Seamless RxJS integration for debounced searching and cancellable HTTP flows

ユースケース

01Migrating traditional NgRx boilerplate to lightweight, signal-based state management

02Managing complex client-side entity collections with fine-grained reactivity

03Implementing reusable state features like loading indicators, error handling, and search filters

主な機能

01Automated enforcement of immutable state updates through patchState and deep-freezing

02Functional store composition using withState, withComputed, and withMethods

03Advanced reactivity patterns including withLinkedState and withFeature for Angular v20+

040 GitHub stars

05Standardized entity management for efficient CRUD operations and lookups

06Seamless RxJS integration for debounced searching and cancellable HTTP flows

ユースケース

01Migrating traditional NgRx boilerplate to lightweight, signal-based state management

02Managing complex client-side entity collections with fine-grained reactivity

03Implementing reusable state features like loading indicators, error handling, and search filters