What is NgRx SignalStore?

NgRx SignalStore is a lightweight, functional state management library for Angular built on top of Signals, offering a composable API to manage local and global state.

How does this skill handle asynchronous side effects?

It utilizes rxMethod from @ngrx/signals/rxjs-interop for side effects requiring RxJS operators, and signalMethod for pure signal-based side effects.

Is it compatible with traditional NgRx patterns?

While it can coexist, the skill enforces modern SignalStore patterns (functional composition) over traditional actions and reducers to reduce boilerplate.

Does this skill support entity management?

Yes, it fully implements the withEntities pattern for managing normalized collections of data with built-in CRUD updaters.

NgRx SignalStore Patterns for Angular

Name: NgRx SignalStore Patterns for Angular
Author: agents-inc

byagents-inc

0•

开发者工具

Implements reactive Angular state management using functional NgRx SignalStore patterns to eliminate boilerplate and enhance performance.

This skill provides comprehensive guidance for architecting state management in modern Angular applications using NgRx SignalStore. It enables developers to build composable, signal-based stores using functional features like withState and withMethods while managing complex side effects through RxJS-integrated rxMethods. By automating the implementation of entity management, immutable updates with patchState, and lifecycle hooks, it ensures high-performance, maintainable codebases that leverage the full power of Angular's fine-grained reactivity system.

主要功能

01Normalized entity management with built-in CRUD operations via withEntities

02Deep-frozen immutable state updates with enforced patchState usage

03Writable derived state implementation using the withLinkedState pattern

04Functional store composition using signalStore and modular features

05Seamless RxJS integration using rxMethod for complex asynchronous flows

060 GitHub stars

使用场景

01Managing complex client-side collections with high-performance CRUD operations

02Orchestrating debounced search and API calls with reactive Signal streams

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

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