Access nested state in NGRX

[James]

Hello;

I would like to access nested states in NGRX but it keeps saying my state is undefined.


export interface AppStateInterface {
reps: RepsStateInterface;
}

export interface RepsStateInterface {
count: number;
post: RepsPostRequestInterface;
}

export interface RepsPostRequestInterface {
isSubmitting: boolean;
}

So I want to have the reps state in my app state, and in the reps state i want a count: number and a post: RepsPostRequestInterface that presently only has a boolean.

Selectors:

export const selectReps = (state: AppStateInterface) => state.reps;

export const countSelector = createSelector(selectReps, (state) => state.count);

export const postSelector = createSelector(
selectReps,
(state: RepsStateInterface) => state.post.isSubmitting
);

Here's my component:

count$: Observable<number>;
isSubmitting$: Observable<boolean>;

constructor(private store: Store<AppStateInterface>) {
this.count$ = store.pipe(select(countSelector));
this.isSubmitting$ = store.pipe(select(postSelector));
}

I've also had the postSelector return state.post, and then map it to state.isSubmitting but I keep getting the same error that the state doesn't exist.

Count works 100%.