ngrx selector cannot return substates

Question

I have imported ngrx to a project for better data modeling. I have just managed to store a huge chunk of information in the ngrx store and then to sucesfully retrieve it in a component. However, as I attempted to divide my data into smaller chunks using selectors, I noticed that the selectors are unable to return any substates of the initial state.

My first selector which retrieves the whole data works fine and is able to return an array of objects:

export const getOperatorFactsState = createSelector(
  getOperatorFactsFeatureState,
  state => {
    return state;
  }
);

My second selector which is supposed to access a smaller sub state of the original data only returns undefined:

export const getNetworksState = createSelector(
  getNetworksFeatureState,
  state => {
    return state.OperatorFacts.operatorFacts.networks;
  }
);

I've done some research online and am unable to pin point why this is occurring as such. Why may be causing this issue? I will provide my action, reducer of effects file if it is requested.

OperatorFacts.module (shares as a picture as it is quite large):

SWilko SWilko · Accepted Answer · 2020-10-21T10:41:56

Looking at your State the selector should be this

export const getNetworksState = createSelector(
 getNetworksFeatureState,
  state => {
   return state.OperatorFacts?.networks; //no extra operatorFacts object
 }
);

ngrx selector cannot return substates

1 Answers