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

Author: markostanimirovic

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;
 }