refactor: use ngrx signal store

Author: soliyn

apps/signal/53-big-signal-performance/src/app/address.component.ts

@@ -7,9 +7,9 @@ import { UserStore } from './user.service';
  template: `
  <div cd-flash class="m-4 block border border-gray-500 p-4">
  Address:
- <div>Street: {{ userService.user().address.street }}</div>
- <div>ZipCode: {{ userService.user().address.zipCode }}</div>
- <div>City: {{ userService.user().address.city }}</div>
+ <div>Street: {{ userService.address.street() }}</div>
+ <div>ZipCode: {{ userService.address.zipCode() }}</div>
+ <div>City: {{ userService.address.city() }}</div>
  </div>
  `,
  changeDetection: ChangeDetectionStrategy.OnPush,

apps/signal/53-big-signal-performance/src/app/job.component.ts

@@ -7,8 +7,8 @@ import { UserStore } from './user.service';
  template: `
  <div cd-flash class="m-4 block border border-gray-500 p-4">
  Job:
- <div>title: {{ userService.user().title }}</div>
- <div>salary: {{ userService.user().salary }}</div>
+ <div>title: {{ userService.title() }}</div>
+ <div>salary: {{ userService.salary() }}</div>
  </div>
  `,
  changeDetection: ChangeDetectionStrategy.OnPush,

apps/signal/53-big-signal-performance/src/app/name.component.ts

@@ -6,7 +6,7 @@ import { UserStore } from './user.service';
  selector: 'name',
  template: `
  <div cd-flash class="m-4 block border border-gray-500 p-4">
- Name: {{ userService.user().name }}
+ Name: {{ userService.name() }}
  </div>
  `,
  changeDetection: ChangeDetectionStrategy.OnPush,

apps/signal/53-big-signal-performance/src/app/note.component.ts

@@ -6,7 +6,7 @@ import { UserStore } from './user.service';
  selector: 'note',
  template: `
  <div cd-flash class="m-4 block border border-gray-500 p-4">
- Note: {{ userService.user().note }}
+ Note: {{ userService.note() }}
  </div>
  `,
  changeDetection: ChangeDetectionStrategy.OnPush,

apps/signal/53-big-signal-performance/src/app/user-form.component.ts

@@ -13,7 +13,7 @@ import { UserStore } from './user.service';
  class="rounded-md border border-gray-400"
  formControlName="name" />
  </div>
- <div>
+ <div formGroupName="address">
  Address:
  <div>
  street:
@@ -64,36 +64,26 @@ export class UserFormComponent {
  userStore = inject(UserStore);
 
  form = new FormGroup({
- name: new FormControl(this.userStore.user().name, { nonNullable: true }),
- street: new FormControl(this.userStore.user().address.street, {
- nonNullable: true,
- }),
- zipCode: new FormControl(this.userStore.user().address.zipCode, {
- nonNullable: true,
- }),
- city: new FormControl(this.userStore.user().address.city, {
- nonNullable: true,
+ name: new FormControl(this.userStore.name(), { nonNullable: true }),
+ address: new FormGroup({
+ street: new FormControl(this.userStore.address.street(), {
+ nonNullable: true,
+ }),
+ zipCode: new FormControl(this.userStore.address.zipCode(), {
+ nonNullable: true,
+ }),
+ city: new FormControl(this.userStore.address.city(), {
+ nonNullable: true,
+ }),
  }),
- note: new FormControl(this.userStore.user().note, { nonNullable: true }),
- title: new FormControl(this.userStore.user().title, { nonNullable: true }),
- salary: new FormControl(this.userStore.user().salary, {
+ note: new FormControl(this.userStore.note(), { nonNullable: true }),
+ title: new FormControl(this.userStore.title(), { nonNullable: true }),
+ salary: new FormControl(this.userStore.salary(), {
  nonNullable: true,
  }),
  });
 
  submit() {
- this.userStore.user.update((u) => ({
- ...u,
- name: this.form.getRawValue().name,
- address: {
- ...u.address,
- street: this.form.getRawValue().street,
- zipCode: this.form.getRawValue().zipCode,
- city: this.form.getRawValue().city,
- },
- note: this.form.getRawValue().note,
- title: this.form.getRawValue().title,
- salary: this.form.getRawValue().salary,
- }));
+ this.userStore.update(this.form.getRawValue());
  }
 }

apps/signal/53-big-signal-performance/src/app/user.service.ts

@@ -1,16 +1,43 @@
-import { Injectable, signal } from '@angular/core';
+import {
+ patchState,
+ signalState,
+ signalStore,
+ withMethods,
+ withState,
+} from '@ngrx/signals';
 
-@Injectable({ providedIn: 'root' })
-export class UserStore {
- user = signal({
- name: 'Bob',
- address: {
- street: '',
- zipCode: '',
- city: '',
+// @Injectable({ providedIn: 'root' })
+
+type User = {
+ name: string;
+ address: {
+ street: string;
+ zipCode: string;
+ city: string;
+ };
+ note: string;
+ title: string;
+ salary: number;
+};
+
+export const UserStore = signalStore(
+ { providedIn: 'root' },
+ withState(
+ signalState<User>({
+ name: 'Bob',
+ address: {
+ street: '',
+ zipCode: '',
+ city: '',
+ },
+ note: '',
+ title: '',
+ salary: 0,
+ }),
+ ),
+ withMethods((store) => ({
+ update(user: User): void {
+ patchState(store, user);
  },
- note: '',
- title: '',
- salary: 0,
- });
-}
+ })),
+);

package-lock.json

@@ -31,6 +31,7 @@
  "@ngrx/entity": "19.0.1",
  "@ngrx/operators": "19.0.1",
  "@ngrx/router-store": "19.0.1",
+ "@ngrx/signals": "^19.2.1",
  "@ngrx/store": "19.0.1",
  "@nx/angular": "20.6.4",
  "@swc/helpers": "0.5.12",