Question

我是redux的新手，并试图了解redux的工作原理，所以我做了一个计数器的小应用，它每次都会增加值这是store.ts文件的代码：

import { iAppState } from './store';
import { INCREMENT } from './actions';
export interface iAppState {
    counter: number
};

export const INITIAL_STATE = {
    counter: 0
}

export function rootReducer(state: iAppState, action): iAppState {
    switch(action.type) {
        case INCREMENT : return {counter: state.counter + 1}
    }
    return state;
}

当我注释return state行并使用console.log(ngRedux.getState());时，它将返回类型为数字的Nan，但是当我取消注释同一行时，它将显示正确的值。

内部发生了什么？

Answer 1

在您的应用程序中首次初始化redux时，通常会在启动时调度@@INIT的操作类型。

通过在化简程序的末尾注释return state;行，这将导致@@INIT动作返回undefined。这将导致@@INIT之后的应用程序的“下一个状态”为undefined。

这反过来意味着，分派INCREMENT操作会使减速器对未定义的counter执行算术运算，这将导致您当前获得的NaN。

还请考虑通过进行以下更改来初始化您的reducers状态：

export function rootReducer(state: iAppState = INITIAL_STATE, action): iAppState {
    switch(action.type) {
        case INCREMENT : return {counter: state.counter + 1}
    }
    return state;
}

减速器：返回默认状态

1 个答案: