This is how I am using my Selector:-
private loadTree() {
this.loading = true;
this.store.select(transitionListSelector).pipe().subscribe(data => {
console.log(data);
data.map(item => {
console.log(item);
this.treeItems.push({ label: item.name, leaf: false, ...item });
})
this.loading = false;
});
}
This is the selector I have defined:-
export const transitionListSelector = createSelector(
topicModuleSelector,
(s) => s.transitionListState.transition
);
This is the reducer I am using:-
export const transitionListReducer = createReducer(
initialTopicModuleState.transitionListState,
on(actions.listTransitionAction, (s) => {
return { ...s, transition: [] };
}),
on(actions.listTransitionSuccessAction, (s, { transition }) => {
return { ...s, transition };
})
);
export function transitionListReducerMap(s: any, a: Action): any {
return transitionListReducer(s, a);
}
This represents my TopicModuleState structure:-
export interface TopicModuleState {
transitionListState: TransitionListState;
}
export interface TransitionListState {
transition: Transition[];
}
export const initialTopicModuleState: TopicModuleState = {
transitionListState: {
transition: []
}
};
here is an image for reference
In the console output, there are 2 results - first one empty and second one actual. I only need the actual result to be displayed.