fix(store): move Angular Signal interop into State service (#3879)

Closes #3869

Author: brandonroberts

modules/data/spec/selectors/entity-selectors$.spec.ts

@@ -1,4 +1,4 @@
-import { Action, MemoizedSelector, Store } from '@ngrx/store';
+import { Action, MemoizedSelector, StateObservable, Store } from '@ngrx/store';
 
 import { BehaviorSubject, Observable, Subject } from 'rxjs';
 import {
@@ -75,7 +75,7 @@ describe('EntitySelectors$', () => {
       actions$ = new Subject<Action>();
       state$ = new BehaviorSubject({ entityCache: emptyCache });
       store = new Store<{ entityCache: EntityCache }>(
-        state$,
+        state$ as unknown as StateObservable,
         null as any,
         null as any
       );

modules/store/spec/store_pipes.spec.ts

@@ -0,0 +1,42 @@
+import { TestBed } from '@angular/core/testing';
+import { Store, provideStore } from '@ngrx/store';
+import { Component, inject, Pipe, PipeTransform } from '@angular/core';
+
+@Pipe({ name: 'test', standalone: true })
+export class TestPipe implements PipeTransform {
+  store = inject(Store);
+
+  transform(s: number) {
+    this.store.select('count');
+    return s * 2;
+  }
+}
+
+@Component({
+  selector: 'test-component',
+  standalone: true,
+  imports: [TestPipe],
+  template: `{{ 3 | test }}`,
+})
+export class TestComponent {}
+
+describe('NgRx Store Integration', () => {
+  describe('with pipes', () => {
+    beforeEach(() => {
+      TestBed.configureTestingModule({
+        imports: [TestComponent],
+        providers: [
+          provideStore({ count: () => 2 }, { initialState: { count: 2 } }),
+        ],
+      });
+    });
+
+    it('should not throw an error', () => {
+      const component = TestBed.createComponent(TestComponent);
+
+      component.detectChanges();
+
+      expect(component.nativeElement.textContent).toBe('6');
+    });
+  });
+});

modules/store/src/state.ts

@@ -1,4 +1,5 @@
-import { Inject, Injectable, OnDestroy, Provider } from '@angular/core';
+import { Inject, Injectable, OnDestroy, Provider, Signal } from '@angular/core';
+import { toSignal } from '@angular/core/rxjs-interop';
 import {
   BehaviorSubject,
   Observable,
@@ -13,14 +14,24 @@ import { ReducerObservable } from './reducer_manager';
 import { ScannedActionsSubject } from './scanned_actions_subject';
 import { INITIAL_STATE } from './tokens';
 
-export abstract class StateObservable extends Observable<any> {}
+export abstract class StateObservable extends Observable<any> {
+  /**
+   * @internal
+   */
+  abstract readonly state: Signal<any>;
+}
 
 @Injectable()
 export class State<T> extends BehaviorSubject<any> implements OnDestroy {
   static readonly INIT = INIT;
 
   private stateSubscription: Subscription;
 
+  /**
+   * @internal
+   */
+  public state: Signal<T>;
+
   constructor(
     actions$: ActionsSubject,
     reducer$: ReducerObservable,
@@ -50,6 +61,8 @@ export class State<T> extends BehaviorSubject<any> implements OnDestroy {
       this.next(state);
       scannedActions.next(action as Action);
     });
+
+    this.state = toSignal(this, { manualCleanup: true, requireSync: true });
   }
 
   ngOnDestroy() {

modules/store/src/store.ts

@@ -2,7 +2,6 @@
 import { computed, Injectable, Provider, Signal } from '@angular/core';
 import { Observable, Observer, Operator } from 'rxjs';
 import { distinctUntilChanged, map, pluck } from 'rxjs/operators';
-import { toSignal } from '@angular/core/rxjs-interop';
 
 import { ActionsSubject } from './actions_subject';
 import {
@@ -19,7 +18,10 @@ export class Store<T = object>
   extends Observable<T>
   implements Observer<Action>
 {
-  private readonly state: Signal<T>;
+  /**
+   * @internal
+   */
+  readonly state: Signal<T>;
 
   constructor(
     state$: StateObservable,
@@ -29,7 +31,7 @@ export class Store<T = object>
     super();
 
     this.source = state$;
-    this.state = toSignal(state$, { manualCleanup: true });
+    this.state = state$.state;
   }
 
   select<K>(mapFn: (state: T) => K): Observable<K>;

modules/store/testing/src/mock_state.ts

@@ -1,9 +1,17 @@
-import { Injectable } from '@angular/core';
+import { Injectable, Signal } from '@angular/core';
+import { toSignal } from '@angular/core/rxjs-interop';
 import { BehaviorSubject } from 'rxjs';
 
 @Injectable()
 export class MockState<T> extends BehaviorSubject<T> {
+  /**
+   * @internal
+   */
+  readonly state: Signal<T>;
+
   constructor() {
     super(<T>{});
+
+    this.state = toSignal(this, { manualCleanup: true, requireSync: true });
   }
 }

projects/standalone-app/src/app/app.component.spec.ts

@@ -1,11 +1,13 @@
 import { TestBed } from '@angular/core/testing';
 import { AppComponent } from './app.component';
 import { RouterTestingModule } from '@angular/router/testing';
+import { provideMockStore } from '@ngrx/store/testing';
 
 describe('AppComponent', () => {
   beforeEach(async () => {
     await TestBed.configureTestingModule({
       imports: [RouterTestingModule, AppComponent],
+      providers: [provideMockStore()],
     }).compileComponents();
   });
 

projects/standalone-app/src/app/app.component.ts

@@ -5,16 +5,19 @@ import {
   INITIAL_STATE_TOKEN,
   provideComponentStore,
 } from '@ngrx/component-store';
+import { TestPipe } from './test.pipe';
 
 @Component({
   selector: 'ngrx-root',
   standalone: true,
-  imports: [RouterModule],
+  imports: [RouterModule, TestPipe],
   template: `
     <h1>Welcome {{ title }} {{ val() }}</h1>
 
     <a routerLink="/feature">Load Feature</a>
 
+    {{ 3 | test }}
+
     <router-outlet></router-outlet>
   `,
   providers: [

projects/standalone-app/src/app/test.pipe.ts

@@ -0,0 +1,11 @@
+import { inject, Pipe, PipeTransform } from '@angular/core';
+import { Store } from '@ngrx/store';
+
+@Pipe({ name: 'test', standalone: true })
+export class TestPipe implements PipeTransform {
+  store = inject(Store);
+  transform(s: number) {
+    this.store.select('count');
+    return s * 2;
+  }
+}