fix(store-devtools): add state signal to StateObservable

modules/store-devtools/spec/store.spec.ts

@@ -885,4 +885,17 @@ describe('Store Devtools', () => {
       expect(oldComputedStates).not.toBe(liftedState.computedStates);
     });
   });
+
+  describe('StateObservable', () => {
+    it('should contain state signal that is updated on state changes', () => {
+      const { state, store } = createStore(counter);
+      expect(state.state()).toEqual({ state: 0 });
+
+      store.dispatch({ type: 'INCREMENT' });
+      expect(store.state()).toEqual({ state: 1 });
+
+      store.dispatch({ type: 'DECREMENT' });
+      expect(store.state()).toEqual({ state: 0 });
+    });
+  });
 });

modules/store-devtools/src/devtools.ts

@@ -1,11 +1,13 @@
 import { Injectable, Inject, ErrorHandler } from '@angular/core';
+import { toSignal } from '@angular/core/rxjs-interop';
 import {
   Action,
   ActionReducer,
   ActionsSubject,
   INITIAL_STATE,
   ReducerObservable,
   ScannedActionsSubject,
+  StateObservable,
 } from '@ngrx/store';
 import {
   merge,
@@ -36,7 +38,7 @@ export class StoreDevtools implements Observer<any> {
   private extensionStartSubscription: Subscription;
   public dispatcher: ActionsSubject;
   public liftedState: Observable<LiftedState>;
-  public state: Observable<any>;
+  public state: StateObservable;
 
   constructor(
     dispatcher: DevtoolsDispatcher,
@@ -114,7 +116,10 @@ export class StoreDevtools implements Observer<any> {
 
     const liftedState$ =
       liftedStateSubject.asObservable() as Observable<LiftedState>;
-    const state$ = liftedState$.pipe(map(unliftState));
+    const state$ = liftedState$.pipe(map(unliftState)) as StateObservable;
+    Object.defineProperty(state$, 'state', {
+      value: toSignal(state$, { manualCleanup: true, requireSync: true }),
+    });
 
     this.extensionStartSubscription = extensionStartSubscription;
     this.stateSubscription = liftedStateSubscription;

modules/store-devtools/src/instrument.ts

@@ -1,12 +1,12 @@
 import { ModuleWithProviders, NgModule } from '@angular/core';
-import { Observable } from 'rxjs';
+import { StateObservable } from '@ngrx/store';
 import { StoreDevtoolsOptions } from './config';
 import { StoreDevtools } from './devtools';
 import { provideStoreDevtools } from './provide-store-devtools';
 
 export function createStateObservable(
   devtools: StoreDevtools
-): Observable<any> {
+): StateObservable {
   return devtools.state;
 }
 

projects/example-app/src/app/books/containers/collection-page.component.ts

@@ -1,10 +1,12 @@
-import { ChangeDetectionStrategy, Component, OnInit } from '@angular/core';
-
+import {
+  ChangeDetectionStrategy,
+  Component,
+  inject,
+  OnInit,
+} from '@angular/core';
 import { Store } from '@ngrx/store';
-import { Observable } from 'rxjs';
 
 import { CollectionPageActions } from '@example-app/books/actions';
-import { Book } from '@example-app/books/models';
 import * as fromBooks from '@example-app/books/reducers';
 
 @Component({
@@ -15,7 +17,7 @@ import * as fromBooks from '@example-app/books/reducers';
       <mat-card-title>My Collection</mat-card-title>
     </mat-card>
 
-    <bc-book-preview-list [books]="(books$ | async)!"></bc-book-preview-list>
+    <bc-book-preview-list [books]="books()"></bc-book-preview-list>
   `,
   /**
    * Container components are permitted to have just enough styles
@@ -34,11 +36,9 @@ import * as fromBooks from '@example-app/books/reducers';
   ],
 })
 export class CollectionPageComponent implements OnInit {
-  books$: Observable<Book[]>;
+  private readonly store = inject(Store);
 
-  constructor(private store: Store) {
-    this.books$ = store.select(fromBooks.selectBookCollection);
-  }
+  readonly books = this.store.selectSignal(fromBooks.selectBookCollection);
 
   ngOnInit() {
     this.store.dispatch(CollectionPageActions.enter());