Merge pull request #15 from reduxjs/linked-signal-fixes

Linked signal fixes

Author: crutchcorn

docs/introduction/getting-started.md

@@ -12,7 +12,7 @@ description: "Introduction > Getting Started: First steps with Angular Redux"
 
 ## Installation
 
-Angular Redux 8.x requires **Angular 17.3 or later**, in order to make use of Angular Signals.
+Angular Redux 2.x requires **Angular 19 or later**, in order to make use of Angular Signals.
 
 ### Installing with `ng add`
 

package.json

@@ -24,24 +24,24 @@
   },
   "private": true,
   "dependencies": {
-    "@angular/animations": "^18.2.0",
-    "@angular/common": "^18.2.0",
-    "@angular/compiler": "^18.2.0",
-    "@angular/core": "^18.2.0",
-    "@angular/forms": "^18.2.0",
-    "@angular/platform-browser": "^18.2.0",
-    "@angular/platform-browser-dynamic": "^18.2.0",
-    "@angular/router": "^18.2.0",
+    "@angular/animations": "^19.0.0",
+    "@angular/common": "^19.0.0",
+    "@angular/compiler": "^19.0.0",
+    "@angular/core": "^19.0.0",
+    "@angular/forms": "^19.0.0",
+    "@angular/platform-browser": "^19.0.0",
+    "@angular/platform-browser-dynamic": "^19.0.0",
+    "@angular/router": "^19.0.0",
     "@reduxjs/toolkit": "^2.2.7",
     "redux": "^5.0.1",
     "rxjs": "~7.8.0",
     "tslib": "^2.3.0",
-    "zone.js": "~0.14.10"
+    "zone.js": "~0.15.0"
   },
   "devDependencies": {
-    "@angular-devkit/build-angular": "^18.2.2",
-    "@angular/cli": "^18.2.2",
-    "@angular/compiler-cli": "^18.2.0",
+    "@angular-devkit/build-angular": "^19.0.1",
+    "@angular/cli": "^19.0.1",
+    "@angular/compiler-cli": "^19.0.0",
     "@testing-library/angular": "^17.3.1",
     "@testing-library/dom": "^10.0.0",
     "@testing-library/jest-dom": "^6.4.8",
@@ -54,7 +54,7 @@
     "jasmine-core": "~5.2.0",
     "jest": "^29.7.0",
     "jest-environment-jsdom": "^29.7.0",
-    "ng-packagr": "^18.2.0",
+    "ng-packagr": "^19.0.1",
     "prettier": "^3.3.3",
     "ts-jest": "^29.2.5",
     "typescript": "~5.5.2"

projects/angular-redux/README.md

@@ -9,7 +9,7 @@ Performant and flexible.
 
 ## Installation
 
-Angular Redux requires **Angular 17.3 or later**.
+Angular Redux requires **Angular 19 or later**.
 
 ### Installing with `ng add`
 

projects/angular-redux/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@reduxjs/angular-redux",
-  "version": "1.0.1",
+  "version": "2.0.0",
   "keywords": [
     "angular",
     "redux"
@@ -11,8 +11,8 @@
   "repository": "github:reduxjs/angular-redux",
   "bugs": "https://github.com/reduxjs/angular-redux/issues",
   "peerDependencies": {
-    "@angular/common": ">=17.3.0",
-    "@angular/core": ">=17.3.0",
+    "@angular/common": ">=19.0.0",
+    "@angular/core": ">=19.0.0",
     "@reduxjs/toolkit": "^2.2.7",
     "redux": "^5.0.0"
   },

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

@@ -119,15 +119,14 @@ describe('injectSelector lifecycle interactions', () => {
     }
 
     @Component({
-      selector: 'app-root',
-      standalone: true,
-      imports: [Child],
-      template: `
+    selector: 'app-root',
+    imports: [Child],
+    template: `
         @if (count() === 1) {
           <child-root />
         }
-      `,
-    })
+      `
+})
     class Parent {
       contextVal = injectReduxAndAssignApp();
       count = injectNormalSelector((s) => s.count);
@@ -167,15 +166,14 @@ describe('injectSelector lifecycle interactions', () => {
     }
 
     @Component({
-      selector: 'app-root',
-      standalone: true,
-      imports: [Child],
-      template: `
+    selector: 'app-root',
+    imports: [Child],
+    template: `
         @if (count() === 0) {
           <child-root />
         }
-      `,
-    })
+      `
+})
     class Parent {
       contextVal = injectReduxAndAssignApp();
       count = injectNormalSelector((s) => s.count);
@@ -265,14 +263,13 @@ describe('performance optimizations and bail-outs', () => {
     }
 
     @Component({
-      selector: 'app-root',
-      standalone: true,
-      imports: [Comp, Comp2],
-      template: `
+    selector: 'app-root',
+    imports: [Comp, Comp2],
+    template: `
         <app-comp />
         <app-other />
-      `,
-    })
+      `
+})
     class App {}
 
     await render(App, {
@@ -322,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);
   });
 });