Cannot read properties of undefined Ngrx selctor is not getting data from store in Angular-CodePudding

I am using ngrx in an Angular project. Ngrx store is saving data correctly. But after adding the new component, the selector for this component is not getting data from the store. I have check the store by ujsing redux tool in chrom browser that the data is there but I am getting error:

core.js:6498 ERROR TypeError: Cannot read properties of undefined (reading 'cashClosingListResponse')

The selectorscode for the component is:

import { createFeatureSelector, createSelector } from '@ngrx/store';

import { StoreConstant } from '../../../../../shared/constants/store.constants';
import { myMainState } from '../../../../shared/store/my-main.state';
import { myListState } from './my-list.state';

export const myMainState = createFeatureSelector<myMainState>(StoreConstant.myStore);

export const myListStore = createSelector(myMainState, (state: myMainState) => state.myTab.myList);

export const myListSelector = createSelector(myListStore, (state: myListState) => state.myListResponse);

The reducers code for the component is:

import cloneDeep from 'lodash/cloneDeep';

import { newState } from '../../../../../shared/helper/helper';
import { myActionTypes, myListActions } from './my-list.actions';
import { initialmyListState, myListState } from './my-list.state';

export function myListReducers(state: myState = cloneDeep(initialmyListState), action: myListActions) {
  switch (action.type) {
    case myActionTypes.GET_LIST_SUCCESS: {
      return newState(state, {
        myListResponse: action.payload.myListResponse
      });
    }


    case myListActionTypes.RESET:
      return newState(state, {
        ...initialmyListState
      });
  }
}

I do not know what I am doing wrong. I have implemented the functionality in similar way for the other componens and it is working fine. I have spent too much time on it but I am not able to find the solution for it.

CodePudding user response：

You are not returning the data in your reducers that is the reason you are getting the error, Please add the code given below before the ending curly brackets of the switch (action.type) statement in your reducers code:

default:
   return state;

Then Your code for reducers will be like this:

import cloneDeep from 'lodash/cloneDeep';

import { newState } from '../../../../../shared/helper/helper';
import { myActionTypes, myListActions } from './my-list.actions';
import { initialmyListState, myListState } from './my-list.state';

export function myListReducers(state: myState = cloneDeep(initialmyListState), action: myListActions) {
  switch (action.type) {
    case myActionTypes.GET_LIST_SUCCESS: {
      return newState(state, {
        myListResponse: action.payload.myListResponse
      });
    }


    case myListActionTypes.RESET:
      return newState(state, {
        ...initialmyListState
      });
      
    default:
     return state;
  }
}