NgRx Store cant bind to the Angular17 App- state doesnt exists

I have a store with actions


import { createAction } from '@ngrx/store';

export const getPatientData = createAction('[Patient] Get Patient Data');
export const resetPatientData = createAction('[Patient] Reset Patient Data');


and reducer:

import { createReducer, createSelector, on } from '@ngrx/store';
import { resetPatientData } from './patients.actions';

export interface Patient {
age: number;
name: string;
last_name: string;
}

export interface PatientState {
patient: Patient;
}

export const initialPatientState: PatientState = {
patient: {
age: 0,
name: 'Adam',
last_name: 'Smith',
},
};

// selectors
export const selectPatient = (state: PatientState) => state.patient;
export const selectPatientData = createSelector(
selectPatient,
(patient: Patient) => patient,
);

export const patientReducer = createReducer(
initialPatientState, // Initial state
on(resetPatientData, () => initialPatientState), // Reset state to initial state on reset action
);



then i want to use it in my component:


@Component({
selector: 'app-patients-data',
standalone: true,
imports: [
NgIconComponent,
OverviewNavComponent,
RouterLink,
NgrxFormsModule,
CommonModule,
],
templateUrl: './patients-data.component.html',
styleUrl: './patients-data.component.css',
viewProviders: [
provideIcons({
bootstrapArrowRightCircleFill,
bootstrapArrowLeftCircleFill,
}),
],
})
export class PatientsDataComponent {
patientData$: Observable<Patient>;

constructor(private patientStore: Store<PatientState>) {
this.patientData$ = this.patientStore.select(selectPatient);
}

ngOnInit() {
this.patientStore.dispatch(resetPatientData());
}
}



and theres no data.

i check like:

<h1>Patients data</h1>
<div *ngIf="patientData$ | async as patient">
<p>Patients data are</p>
<p>Name: {{ patient.name }}</p>
<p>Last Name: {{ patient.last_name }}</p>
<p>Age: {{ patient.age }}</p>
</div>



heres package.json

{
"name": "pharma-ui",
"version": "0.0.0",
"scripts": {
"ng": "ng",
"start": "ng serve",
"build": "ng build",
"watch": "ng build --watch --configuration development",
"test": "ng test",
"serve:ssrharmaUI": "node dist/pharma-ui/server/server.mjs"
},
"private": true,
"dependencies": {
"@angular/animations": "^17.2.0",
"@angular/common": "^17.2.0",
"@angular/compiler": "^17.2.0",
"@angular/core": "^17.2.0",
"@angular/forms": "^17.2.0",
"@angular/platform-browser": "^17.2.0",
"@angular/platform-browser-dynamic": "^17.2.0",
"@angular/platform-server": "^17.2.0",
"@angular/router": "^17.2.0",
"@angular/ssr": "^17.2.0",
"@ng-icons/bootstrap-icons": "^28.1.0",
"@ng-icons/core": "^28.1.0",
"@ng-icons/heroicons": "^28.1.0",
"@ng-icons/tabler-icons": "^29.5.0",
"@ngrx/store": "^17.2.0",
"express": "^4.18.2",
"ngrx-forms": "^8.0.0",
"primeng": "^17.18.4",
"rxjs": "~7.8.0",
"sweetalert2": "^11.12.4",
"tslib": "^2.3.0",
"zone.js": "~0.14.3"
},
"devDependencies": {
"@angular-devkit/build-angular": "^17.2.0",
"@angular/cli": "^17.2.0",
"@angular/compiler-cli": "^17.2.0",
"@types/express": "^4.17.17",
"@types/jasmine": "~5.1.0",
"@types/node": "^18.18.0",
"autoprefixer": "^10.4.19",
"jasmine-core": "~5.1.0",
"karma": "~6.4.0",
"karma-chrome-launcher": "~3.2.0",
"karma-coverage": "~2.2.0",
"karma-jasmine": "~5.1.0",
"karma-jasmine-html-reporter": "~2.1.0",
"postcss": "^8.4.39",
"tailwindcss": "^3.4.4",
"typescript": "~5.3.2"
}
}



I cant access any data. The ngOnInit method doesnt have any effect and, according to the dev tools, it isnt invoked. The code editor doesnt return any errors. I installed redux dev tools, and it doesnt recognize any state, like my store didnt exist. Why i can use the store? Why browser extension doesnt see the state? How to fix it?

Continue reading...