Migrate global app state to signals library

src/app/app.config.ts

@@ -1,23 +1,15 @@
 import {
 	ApplicationConfig,
-	importProvidersFrom,
 	isDevMode,
 	provideBrowserGlobalErrorListeners,
 	provideZonelessChangeDetection,
 } from '@angular/core';
-import { StoreModule } from '@ngrx/store';
 import { provideStoreDevtools } from '@ngrx/store-devtools';
-import { appStateReducer } from './state/state.reducer';
 
 export const appConfig: ApplicationConfig = {
 	providers: [
 		provideBrowserGlobalErrorListeners(),
 		provideZonelessChangeDetection(),
-		importProvidersFrom(
-			StoreModule.forRoot({
-				app: appStateReducer,
-			})
-		),
 		provideStoreDevtools({
 			maxAge: 25,
 			logOnly: !isDevMode(),

src/app/app.html

@@ -1,5 +1,5 @@
 <main>
-	@switch (currentView$ | async) {
+	@switch (currentView()) {
 		@default {
 			<app-starting-point></app-starting-point>
 		}

src/app/app.state.ts

@@ -0,0 +1,15 @@
+import { signalStore, withState } from '@ngrx/signals';
+
+export type AppState = {
+	currentView: CurrentView;
+};
+
+export enum CurrentView {
+	StartingPoint = 'startingPoint',
+}
+
+const initialState: AppState = {
+	currentView: CurrentView.StartingPoint,
+};
+
+export const AppStateStore = signalStore({ providedIn: 'root' }, withState(initialState));

src/app/app.ts

@@ -1,7 +1,5 @@
-import { AsyncPipe } from '@angular/common';
 import { ChangeDetectionStrategy, Component, inject, OnInit } from '@angular/core';
-import { select, Store } from '@ngrx/store';
+import { AppStateStore } from './app.state';
-import { selectCurrentView } from './state/state.selectors';
 import { StartingPoint } from './views/starting-point/starting-point';
 
 @Component({
@@ -9,12 +7,11 @@ import { StartingPoint } from './views/starting-point/starting-point';
 	templateUrl: './app.html',
 	styleUrl: './app.scss',
 	changeDetection: ChangeDetectionStrategy.OnPush,
-	imports: [AsyncPipe, StartingPoint],
+	imports: [StartingPoint],
 })
 export class App implements OnInit {
-	private readonly store$ = inject(Store);
+	private readonly state = inject(AppStateStore);
-
+	readonly currentView = this.state.currentView;
-	readonly currentView$ = this.store$.pipe(select(selectCurrentView));
 
 	ngOnInit(): void {}
 }

src/app/state/state.reducer.ts

@@ -1,15 +0,0 @@
-import { createReducer } from '@ngrx/store';
-
-export interface AppState {
-	currentView: CurrentView;
-}
-
-export enum CurrentView {
-	StartingPoint = 'startingPoint',
-}
-
-export const initialState: AppState = {
-	currentView: CurrentView.StartingPoint,
-};
-
-export const appStateReducer = createReducer(initialState);

src/app/state/state.selectors.ts

@@ -1,6 +0,0 @@
-import { createFeatureSelector, createSelector } from '@ngrx/store';
-import { AppState } from './state.reducer';
-
-export const selectAppState = createFeatureSelector<AppState>('app');
-
-export const selectCurrentView = createSelector(selectAppState, (state: AppState) => state.currentView);