TypeError: Cannot read property 'type' of undefined

TypeError: Cannot read property 'type' of undefined

我正在尝试在 angular6 中使用 ngrx。我是 ngrx 的新手。我关注了一些网站并实施了它,但我收到错误:reducer 页面中未定义的类型。请帮忙,即使这是我的小错误。谢谢

我在 google 中搜索过,但其中 none 适合我。

我的减速器页面:


import { Action } from '@ngrx/store';
import { login } from '../../interface/login';
import *  as loginInstance from '../actions/login.actions';

 const initialState :login={
    username:'',
    password:''
};

export function getLoginInput(action:loginInstance.loginAction, loginValueClassObj:loginInstance.LoginValueClass, state:login = initialState){
    switch(action.type){
        case loginInstance.LOGIN_VALUE:
        {
            console.log("login user credentials ", loginValueClassObj, "");
            // loginUserCredential.username = loginValueClassObj.type;
              return loginValueClassObj;
        }
         default:
          return state;
    }

}

和我的操作页面:

import { Action } from '@ngrx/store';
import { login } from '../../interface/login'

export const LOGIN_VALUE = 'LoginValue'   


export class LoginValueClass implements Action{
    constructor(public payload?:login){}
    readonly type = LOGIN_VALUE;
}
export type loginAction =  LoginValueClass;

和package.json文件:

"dependencies": {
    "@angular/animations": "^6.1.2",
    "@angular/cdk": "^6.4.5",
    "@angular/common": "^6.1.0",
    "@angular/compiler": "^6.1.0",
    "@angular/core": "^6.1.0",
    "@angular/forms": "^6.1.0",
    "@angular/http": "^6.1.0",
    "@angular/material": "^6.4.5",
    "@angular/platform-browser": "^6.1.0",
    "@angular/platform-browser-dynamic": "^6.1.0",
    "@angular/router": "^6.1.0",
    "@ngrx/store": "^6.1.0",
    "core-js": "^2.5.4",
    "rxjs": "^6.0.0",
    "zone.js": "~0.8.26"
  },

你应该这样定义你的减速器:

export function getLoginInput(state:login = initialState, action:loginInstance.loginAction) {
    switch(action.type){
        case loginInstance.LOGIN_VALUE:
        {
            console.log("login user credentials ", state, "");
            //update your state here and return a new state as per your app logic
            //I am returning the same state just for this example
            return state;
        }
         default:
          return state;
    }

}

查看正在运行的 stackblitz - https://stackblitz.com/edit/angular-cw836m?file=src/app/store/reducers/login.reducer.ts

查看官方 ngrx 文档 - https://github.com/ngrx/platform/blob/master/docs/store/actions.md#action-reducers