Create app state selector

src/app/app.html

@@ -1,3 +1,4 @@
 <main>
 	<h1>Hello, world!</h1>
+	<p>Current View: {{ currentView$ | async }}</p>
 </main>

src/app/app.ts

@@ -1,10 +1,18 @@
-import { Component } from '@angular/core';
-import { StoreModule } from '@ngrx/store';
-import { appStateReducer } from './state/state.reducer';
+import { AsyncPipe } from '@angular/common';
+import { Component, inject, OnInit } from '@angular/core';
+import { select, Store } from '@ngrx/store';
+import { selectCurrentView } from './state/state.selectors';
 
 @Component({
 	selector: 'app-root',
 	templateUrl: './app.html',
 	styleUrl: './app.scss',
+	imports: [AsyncPipe],
 })
-export class App {}
+export class App implements OnInit {
+	private readonly store$ = inject(Store);
+
+	readonly currentView$ = this.store$.pipe(select(selectCurrentView));
+
+	ngOnInit(): void {}
+}

src/app/state/state.reducer.ts

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

src/app/state/state.selectors.ts

@@ -0,0 +1,6 @@
+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);