Question

TypeError：无法读取未定义的属性“type”

2019-08-04

4727

angular ngrx-store

我正在尝试在 angular6 中使用 ngrx。我对 ngrx 非常陌生。我关注了一些网站并实现了它，但我得到了错误：reducer 页面中的类型未定义。请帮忙，即使这是我这边的小错误。谢谢

我在谷歌上搜索过，但没有一个对我有用。

我的 Reducer 页面：


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"
  },

Answer 1

您应该像这样定义您的 Reducer：

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