Andrei Bogdan Fara

Posted on Jul 22

The Signal Store from NGRX - breakdown of the main concepts

#angular #webdev #javascript #programming

Characteristics

signal based
functional and declarative
used for local or global state management
extensible with custom features

How does it compare to the NGRX Global Store?

more lightweight and simplified API
don't have to worry as much about the data flow
seems harder to misuse, like reusing actions
easier to extend

The Creator of NGRX Signal Store, Marko Stanimirovic describes here NgRx SignalStore: In-Depth Look at Signal-Based State Management in Angular

Class-based state management limitations:

Typing: It’s not possible to define dynamic class properties or methods that are strongly typed
Tree-shaking: Unused class methods won’t be removed from the final bundle
Extensibility: Multiple inheritance is not supported.
Modularity: Splitting selectors, updaters, and effects into different classes is possible, but not provided out of the box

Let’s explore the store's API with code examples. We’ll use a project with a list of product and filtering features.

Creating a SignalStore

signalStore function which returns an injectable service suitable to be injected and provided where needed to be used.

import { signalStore } from "@ngrx/signals";

export const ProductStore = signalStore( … );

Providing State withState

As with any NGRX Store so far there is an initial state that can be provided, using the function withState which accepts object literals, records or factory functions (for creating a dynamic initial state) as inputs.

import { signalStore, withState } from "@ngrx/signals";

const initialProductState: ProductState = { products: [] };

export const ProductStore = signalStore(
 withState(initialProductState);
);

Computed State withComputed

built on top of the computed function to create derived states (computed state) from the store

import { signalStore, withComputed, withState } from "@ngrx/signals";

export const ProductStore = signalStore(
 withState(initialProductState),
 withComputed(({products}) => ({
   averagePrice: computed(() => {
     const total = products().reduce((acc, p) => acc + p.price, 0);
     return total / products().length;
   })
 })),

Performing Operations withMethods

it’s the place where the store’s operations will be defined
these can be methods to update the store or perform some operations based on its current state

import { signalStore, withComputed, withState, withMethods } from "@ngrx/signals";

export const ProductStore = signalStore(
 withState(initialProductState),
 withComputed(({products}) => ({
   averagePrice: computed(() => {
     const total = products().reduce((acc, p) => acc + p.price, 0);
     return total / products().length;
   })
 })),


 // CRUD operations
 withMethods((store,
   productService = inject(ProductService),
 ) => ({
   loadProducts: () => {
     const products = toSignal(productService.loadProducts())
     patchState(store, { products: products() })
   },
   addProduct: (product: Product) => {
     patchState(store, { products: [...store.products(), product] });
   },
   // ...
 })),

withMethods & withComputed get in a factory function and return a dictionary of methods and computed signals that can be accessed by using the store. They also run in an injection context, which makes it possible to inject dependencies into them.

Hooking withHooks

lifecycle methods of the store, currently it has onInit and onDestroy methods


import { withHooks } from "@ngrx/signals"; 

export const ProductStore = signalStore(
 withHooks((store) => ({
   onInit() {
     // Load products when the store is initialized
     store.loadProducts();
   },
 })),
);

Managing Collections withEntities

use it when having to manage data like “Products, Users, Clients, etc” where CRUD operations are necessary for that feature
it provides a set of APIs to manage collections, like: addEntity, setEntity, remoteEntity.

export const ProductStoreWithEntities = signalStore(
 withEntities<Product>(),


 // CRUD operations
 withMethods((store,
   productService = inject(ProductService),
 ) => ({
   loadProducts: () => {
     const products = toSignal(productService.loadProducts())();
     patchState(store, setAllEntities(products || []));
   },
   updateProduct: (product: Product) => {
     productService.updateProduct(product);
     patchState(store, setEntity(product));
   },

 })),

It’s possible to add multiple features which start with “with” but they can access only what was defined before them.

Creating custom features with signalStoreFeature

signalStoreFeature - used for extending the functionality of the store.

Stores can get complex and hard to manage for big enterprise applications. When writing features and components for a project, the better and more granular the split, the easier to manage, maintain the code and write tests for it.

However, considering the API that SignalStore provides the store can get hard to manage unless code is splitted accordingly. signalStoreFeature is suitable for extracting specific functionality of a feature (or component) into a standalone testable function which potentially (and ideally) can be reused in other stores.

export const ProductStore = signalStore(
 // previous defined state and methods

 // Externalizing filtering options
 withFilteringOptions(),
);


export function withFilteringOptions() {
 return signalStoreFeature(
  // Filtering operations
 withMethods(() => ({
   getProductsBetweenPriceRange: (lowPrice: number, highPrice: number, products: Array<Product>, ) => {
     return products.filter(p => p.price >= lowPrice && p.price <= highPrice);
   },


   getProductsByCategory: (category: string, products: Array<Product>) => {
     return products.filter(p => p.category === category);
   },
 })),
 );
}

Now an example of signalStoreFeature that shows the possibility to reuse signalStoreFeature(s) across multiple stores.

import { patchState, signalStoreFeature, withMethods } from "@ngrx/signals";

export function withCrudOperations() {
 return signalStoreFeature(
   withMethods((store) => ({
     load: (crudService: CrudOperations) => crudService.load(),
     update: (crudableObject: CRUD, crudService: CrudOperations) => {
       crudService.update(crudableObject);
       patchState(store, setEntity(crudableObject));
     },
   }),
 ));
}

export interface CrudOperations {
 load(): void;
 update(crudableObject: CRUD): void;
}

// Product & Customer services must extend the same interface.

export class ProductService implements CrudOperations {
 load(): void {
   console.log('load products');
 }
 update(): void {
   console.log('update products');
 }
}

export class CustomerService implements CrudOperations {
 load(): void {
   console.log('load customers');
 }
 update(): void {
   console.log('update customers');
 }
}

// and now let’s add this feature in our stores

export const ProductStore = signalStore(
 withCrudOperations(),
);


export const CustomerStore = signalStore(
 withCrudOperations(),
);

NGRX Toolkit utility package

Being that easy to extend, there is already a utility package called ngrx-toolkit meant to add useful tools to Signal Stores.

Injecting SignalStore

{ providedIn: ‘root’ } or in the providers array of a Component, Service, Directive, etc.

DeepSignals

nested state properties read as signals, generated lazily on demand

patchState

alternative API to set and update (of signal API) for updating store’s state, only needs to be provided the values we want to change

rxMethod

utility method which helps use RxJS together with the SignalStore or signalState

Lighter alternative with SignalState

SignalState provides an alternative to managing signal-based state in a concise and minimalistic manner.

Concluding thoughts

It remains to be proven how reliable it is for larger applications, especially when applied as a global store.

For now I think it's a great addition to the default Signal API, making it a good option for managing:

component level state
feature based state

Additional Resources:

https://www.stefanos-lignos.dev/posts/ngrx-signals-store
https://www.angulararchitects.io/blog/the-new-ngrx-signal-store-for-angular-2-1-flavors/ (group of 4 articles on the topic)
https://ngrx.io/guide/signals

DEV Community