fix: dispatches onInit now get caught by selector

Author: crutchcorn

projects/angular-redux/src/lib/inject-selector.ts

@@ -1,6 +1,7 @@
 import { EqualityFn } from './types';
 import {
   assertInInjectionContext,
+  DestroyRef,
   effect,
   inject,
   Signal,
@@ -80,6 +81,7 @@ export function createSelectorInjection(): InjectSelector {
   ): Signal<Selected> => {
     assertInInjectionContext(injectSelector);
     const reduxContext = inject(ReduxProvider);
+    const destroyRef = inject(DestroyRef);
 
     const { equalityFn = refEquality } =
       typeof equalityFnOrOptions === 'function'
@@ -90,19 +92,17 @@ export function createSelectorInjection(): InjectSelector {
 
     const selectedState = signal(selector(store.getState()));
 
-    effect((onCleanup) => {
-      const unsubscribe = subscription.addNestedSub(() => {
-        const data = selector(store.getState());
-        if (equalityFn(selectedState(), data)) {
-          return;
-        }
+    const unsubscribe = subscription.addNestedSub(() => {
+      const data = selector(store.getState());
+      if (equalityFn(selectedState(), data)) {
+        return;
+      }
 
-        selectedState.set(data);
-      });
+      selectedState.set(data);
+    });
 
-      onCleanup(() => {
-        unsubscribe();
-      });
+    destroyRef.onDestroy(() => {
+      unsubscribe();
     });
 
     return selectedState;

projects/angular-redux/src/tests/inject-selector-and-dispatch.spec.ts

@@ -1,9 +1,10 @@
 import { Component } from '@angular/core';
-import { render } from '@testing-library/angular';
+import { render, waitFor } from '@testing-library/angular';
 import '@testing-library/jest-dom';
 import { configureStore, createSlice } from '@reduxjs/toolkit';
 import { provideRedux, injectDispatch, injectSelector } from '../public-api';
 import { userEvent } from '@testing-library/user-event';
+import { createStore } from 'redux';
 
 const user = userEvent.setup();
 
@@ -70,3 +71,32 @@ it('injectSelector should work with reactivity', async () => {
 
   expect(getByText('Count: 1')).toBeInTheDocument();
 });
+
+it('should show a value dispatched during ngOnInit', async () => {
+  const store = configureStore({
+    reducer: {
+      counter: counterSlice.reducer,
+    },
+  });
+
+  @Component({
+    selector: 'app-root',
+    standalone: true,
+    template: '<p>Count: {{count()}}</p>',
+  })
+  class Comp {
+    count = injectSelector((state: any) => state.counter.value);
+    dispatch = injectDispatch();
+    increment = counterSlice.actions.increment;
+
+    ngOnInit() {
+      this.dispatch(this.increment());
+    }
+  }
+
+  const { getByText } = await render(Comp, {
+    providers: [provideRedux({ store })],
+  });
+
+  await waitFor(() => expect(getByText('Count: 1')).toBeInTheDocument());
+});