Angular 5和angular-rdux/store

Question

我已经安装了Angular 5，

"@angular-redux/store"："^7.1.0"，

"redux"："^3.7.2"，

下面是我的app.module.ts构造函数：

constructor(ngRedux: NgRedux<IAppState>) {
 console.log('Configuring ngRedux');
 ngRedux.configureStore(rootReducer, INITIAL_STATE);
 }

这是我的store.ts文件：

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
 };
 }
}

和我的app.component.ts文件：

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
 });
 }
}

第一个错误：

当我点击Increment按钮时，我得到了Expression has changed When it checked。所以我用谷歌搜索并添加了

changeDetection: ChangeDetectionStrategy.OnPush，

因此，表达式在检查错误后发生了变化。但在此之后，当我单击Increment时，我得到了NAN。以下是控制台输出：

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

有没有人遇到过这个错误？你有什么解决办法吗？

提前谢谢。

Answer 1

在“rootReducer”函数中，缺少返回(新)状态。应该是这样的

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

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