fix!: allow required signals to be read in a selector

Author: crutchcorn

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

@@ -4,6 +4,7 @@ import {
   DestroyRef,
   effect,
   inject,
+  linkedSignal,
   Signal,
   signal,
 } from '@angular/core';
@@ -90,7 +91,7 @@ export function createSelectorInjection(): InjectSelector {
 
     const { store, subscription } = reduxContext;
 
-    const selectedState = signal(selector(store.getState()));
+    const selectedState = linkedSignal(() => selector(store.getState()));
 
     const unsubscribe = subscription.addNestedSub(() => {
       const data = selector(store.getState());
@@ -105,7 +106,7 @@ export function createSelectorInjection(): InjectSelector {
       unsubscribe();
     });
 
-    return selectedState;
+    return selectedState.asReadonly();
   };
 
   Object.assign(injectSelector, {

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

@@ -1,4 +1,4 @@
-import { Component } from '@angular/core';
+import { Component, input } from '@angular/core';
 import { render, waitFor } from '@testing-library/angular';
 import '@testing-library/jest-dom';
 import { configureStore, createSlice } from '@reduxjs/toolkit';
@@ -100,3 +100,44 @@ it('should show a value dispatched during ngOnInit', async () => {
 
   await waitFor(() => expect(getByText('Count: 1')).toBeInTheDocument());
 });
+
+it("should not throw an error on a required input passed to the selector's fn", async () => {
+  const store = configureStore({
+    reducer: {
+      counter: counterSlice.reducer,
+    },
+  });
+
+  @Component({
+    selector: 'app-count-and-add',
+    standalone: true,
+    template: `
+      <button aria-label="Increment value" (click)="dispatch(increment())">
+        Increment
+      </button>
+      <p>Count: {{ count() }}</p>
+    `,
+  })
+  class CountAndAdd {
+    dispatch = injectDispatch();
+    increment = counterSlice.actions.increment;
+    addBy = input.required<number>();
+    count = injectSelector((state: any) => state.counter.value + this.addBy());
+  }
+
+  @Component({
+    selector: 'app-root',
+    imports: [CountAndAdd],
+    standalone: true,
+    template: '<app-count-and-add [addBy]="12"/>',
+  })
+  class App {}
+
+  const { getByText, getByLabelText } = await render(App, {
+    providers: [provideRedux({ store })],
+  });
+
+  await waitFor(() => expect(getByText('Count: 12')).toBeInTheDocument());
+  await user.click(getByLabelText('Increment value'));
+  await waitFor(() => expect(getByText('Count: 13')).toBeInTheDocument());
+});

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

@@ -319,6 +319,6 @@ describe('performance optimizations and bail-outs', () => {
     store.dispatch({ type: '' });
 
     await waitFor(() => expect(selector).toHaveBeenCalledTimes(2));
-    expect(renderedItems.length).toEqual(2);
+    expect(renderedItems.length).toEqual(1);
   });
 });