Currently, my setup involves Angular 6 and NgRX 6.
The reducer implementation I have resembles the following -
export interface IFlexBenefitTemplateState {
original: IFlexBenefitTemplate;
changes: IFlexBenefitTemplate;
count: number;
loading: boolean;
}
export const INITIAL_STATE: IFlexBenefitTemplateState = {
original: null,
changes: null,
count: 0,
loading: true,
};
export default (state = INITIAL_STATE, { type, payload }) => {
switch (type) {
case STAGE_TEMPLATE_CHANGE:
const pendingChanges = Object.assign({}, state.changes.sections);
const newSection = Object.assign({}, pendingChanges[payload.key], payload, {
changeType: 'updated',
});
return {
...state,
changes: {
sections: Object.assign({}, pendingChanges, { [payload.key]: { ...newSection } }),
},
count: !pendingChanges[payload.key].hasOwnProperty('changeType') ? state.count + 1 : state.count,
};
default:
return state;
}
};
I am using a selector to retrieve state.count, defined as shown below -
export const changesCount = createSelector(getStore, (state: IFlexBenefitTemplateState) => state.count);
In my template, I'm trying to display this value using the following approach -
@Component({
selector: 'app-page-header-component',
templateUrl: './page-header.component.html',
})
export class PageHeaderComponent implements OnInit {
public count$: Observable<number>;
public language: string;
constructor(private store: Store<ICommonAppState>) {}
ngOnInit(): void {
this.count$ = this.store.select(changesCount);
this.language = 'English';
}
}
However, this.count$ is resulting in an error message:
[ts] Argument of type 'MemoizedSelector<IBenefitsState, number>' is not assignable to parameter of type 'string'.
I'm struggling to comprehend why this issue is occurring. Can anyone provide insight into what might be causing it?