TypeError: Cannot read property 'type' of undefined

Question

I am trying to use ngrx in angular6. I am very new in ngrx. I follow some site and implement it but I am getting Error: Type of undefined in reducer page. Please help even it is small mistake from my end. Thanks

I searched in google but none of them work for me.

my reducer page:

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

}

and my action page:

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;

and package.json file:

"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

You should define your reducer like this:

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

}

See the working stackblitz - https://stackblitz.com/edit/angular-cw836m?file=src/app/store/reducers/login.reducer.ts

See the official ngrx docs - https://github.com/ngrx/platform/blob/master/docs/store/actions.md#action-reducers