Can I share logic between multiple stores?

Yes, the skill covers creating reusable logic using signalStoreFeature and the newer withFeature pattern introduced in NgRx v20.

Why should I use patchState instead of direct mutation?

Using patchState ensures that state updates remain immutable and that Angular's signal notification system is properly triggered for UI updates.

How does this skill handle asynchronous operations?

The skill provides patterns for using rxMethod from @ngrx/signals/rxjs-interop to integrate RxJS observables for complex, cancellable async side effects.

What version of Angular does this skill support?

This skill is optimized for Angular 17 and higher, as it relies on the Angular Signals API and modern NgRx SignalStore functional features.

Does this replace traditional NgRx actions and reducers?

Yes, SignalStore replaces actions, reducers, and selectors with a more streamlined approach using methods and computed signals, significantly reducing boilerplate.

Angular NgRx SignalStore Patterns

Name: Angular NgRx SignalStore Patterns
Author: agents-inc

byagents-inc

•

開発者ツール

Implements modern NgRx SignalStore patterns for functional, signal-based state management in Angular 17+ applications.

This skill provides a comprehensive framework for managing reactive client state in Angular 17+ using the NgRx SignalStore. It replaces traditional, boilerplate-heavy Redux patterns with a lightweight, functional composition approach that leverages Angular Signals for fine-grained reactivity. Developers can efficiently build and scale applications using standardized patterns for state updates via patchState, entity management with withEntities, and complex side effects using rxMethod or signalMethod, ensuring predictable and performant state transitions.

主な機能

01Functional store composition using signalStore, withState, and withMethods

02Context-aware custom features for reusable store logic and loading states

03Implementation of writable derived state using the withLinkedState pattern

04Standardized entity management for CRUD operations via withEntities

051 GitHub stars

06Reactive side effect handling with rxMethod and RxJS integration

ユースケース

01Managing complex client-side collections and normalized entity state

02Refactoring traditional NgRx (Actions/Reducers/Effects) to modern Signal-based stores

03Implementing performant, debounced search and asynchronous API data fetching

主な機能

01Functional store composition using signalStore, withState, and withMethods

02Context-aware custom features for reusable store logic and loading states

03Implementation of writable derived state using the withLinkedState pattern

04Standardized entity management for CRUD operations via withEntities

051 GitHub stars

06Reactive side effect handling with rxMethod and RxJS integration

ユースケース

01Managing complex client-side collections and normalized entity state

02Refactoring traditional NgRx (Actions/Reducers/Effects) to modern Signal-based stores

03Implementing performant, debounced search and asynchronous API data fetching