I have installed Angular 5,
"@angular-redux/store": "^7.1.0",
"redux": "^3.7.2",
Here is my app.module.ts constructor:
constructor(ngRedux: NgRedux<IAppState>) {
console.log('Configuring ngRedux');
ngRedux.configureStore(rootReducer, INITIAL_STATE);
}
Here is my store.ts file:
import { INCREMENT } from './actions';
export interface IAppState {
counter: number;
}
export const INITIAL_STATE: IAppState = {
counter: 0
};
export function rootReducer(state: IAppState, action): IAppState {
console.log(state);
switch (action.type) {
case INCREMENT:
return {
counter: state.counter + 1
};
}
}
and my app.component.ts file:
import { Component, ChangeDetectionStrategy } from '@angular/core';
import { NgRedux, select } from '@angular-redux/store';
import { IAppState } from './store';
import { INCREMENT } from './actions';
@Component({
changeDetection: ChangeDetectionStrategy.OnPush,
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
title = 'Redux';
@select() counter;
constructor(private ngRedux: NgRedux<IAppState>) {
ngRedux.subscribe(() => {
console.log(ngRedux.getState());
});
}
increment() {
this.ngRedux.dispatch({
type: INCREMENT
});
}
}
First Error:
When I clicked on Increment button I got Expression has changed after it was checked error. So googled it and added
changeDetection: ChangeDetectionStrategy.OnPush,
So Expression has changed after it was checked error solved. But after this when I click on Increment I am getting NAN. Here is the console output:
Configuring ngRedux - Message from AppModule constructor
{counter: 0} - Message from rootReducer - First Time while initializing
--After hitting increment button
{} - Empty Object from rootReducer
{counter: NaN} - value of ngRedux.getState() in app.component.ts constructor
Has anybody encountered this error? Have you got any resolution?
Thanks in Advance.
