Follow

Keep Up to Date with the Most Important News

By pressing the Subscribe button, you confirm that you have read and are agreeing to our Privacy Policy and Terms of Use
Contact

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

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:

MEDevel.com: Open-source for Healthcare and Education

Collecting and validating open-source software for healthcare, education, enterprise, development, medical imaging, medical records, and digital pathology.

Visit Medevel

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.

>Solution :

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;
  }
}
Add a comment

Leave a Reply

Keep Up to Date with the Most Important News

By pressing the Subscribe button, you confirm that you have read and are agreeing to our Privacy Policy and Terms of Use

Discover more from Dev solutions

Subscribe now to keep reading and get access to the full archive.

Continue reading