Редуктор: возвращает состояние по умолчанию

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

Когда в вашем приложении впервые инициализируется избыточность, тип запуска @@INIT обычно отправляется при запуске.

Закомментировав строку return state; в конце вашего редуктора, это вызывает@@INIT действие для возврата undefined.Это приводит к тому, что «следующее состояние» вашего приложения после @@INIT будет undefined.

Это, в свою очередь, означает, что отправка действия INCREMENT заставляет ваш редуктор выполнять арифметику с неопределенным counter,что приведет к получению NaN, который вы в настоящее время получаете.

Также рассмотрите возможность инициализации состояния редукторов, сделав следующее изменение:

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