Add signals

Author: PKief

README.md

@@ -101,6 +101,15 @@ this.todoStore
 
 The `select` method will only trigger an event if the value of the specific property of the state has been changed. In addition the returned values are deep copies of the values in the store, so it is can't cause any reference issues.
 
+### Usage with signals
+
+Since Angular 17, [Signals](https://angular.io/guide/signals#angular-signals) can be used instead of Observables. To achieve this, the function `selectAsSignal` can be used:
+
+```ts
+// get a signal of a specific part of the state
+const myTodos = this.todoStore.selectAsSignal(state => state.todos);
+```
+
 ### Get state snapshot
 
 Some operations only require the current state of the store and do not need to get notified about changes. These are cases where a snapshot of the latest state can be very helpful.

lib/src/store/store.ts

@@ -1,4 +1,5 @@
-import { inject } from '@angular/core';
+import { inject, Signal } from '@angular/core';
+import { toSignal } from '@angular/core/rxjs-interop';
 import {
   BehaviorSubject,
   map,
@@ -19,7 +20,10 @@ export abstract class Store<State extends object> {
 
   readonly state$: Observable<State>;
 
-  constructor(private name: string, initialState: State) {
+  constructor(
+    private name: string,
+    initialState: State
+  ) {
     this.stateSource = new BehaviorSubject<State>(initialState);
     this.state$ = this.stateSource.asObservable();
     this.actionSource = new Subject<Action<State>>();
@@ -42,6 +46,14 @@ export abstract class Store<State extends object> {
     );
   }
 
+  selectAsSignal<SelectedState>(
+    selector: (state: State) => SelectedState
+  ): Signal<SelectedState> {
+    return toSignal(this.select(selector), {
+      initialValue: selector(this.snapshot),
+    });
+  }
+
   get snapshot() {
     return this.stateSource.getValue();
   }