Angular 5 and angular-rdux/store

Question

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.

Answer 1

In your 'rootReducer' function, the return (new) state is missing. it should be like this

export function rootReducer(state: IAppState, action): IAppState {
    ...
    return state; // we care!
}

from https://github.com/angular-redux/store/blob/master/articles/intro-tutorial.md