Here is the structure of my IStore:
export interface IStore {
plans: IPlanRedux;
}
The definition of IPlanRedux is as follows:
export interface IPlanRedux {
entities: { [key: string]: IPlan };
ids: Array<string>;
}
export interface IPlan {
id?: string;
name?: string;
}
To create selectors for the plan state, I have implemented the following selectors:
plan.selectors.ts:
export const getEntities = (planRdx: IPlanRedux) => planRdx.entities;
export const getIds = (planRdx: IPlanRedux) => planRdx.ids;
export const getAll = createSelector(getEntities, getIds, (entities, ids) => { return ids.map(id => entities[id]); });
In addition, in root.selectors.ts:
export const getPlansState = (state: IStore) => state.plans;
export const getPlanEntities = createSelector(getPlansState, fromPlans.getAll);
I encountered a compiler error while trying to subscribe using the getPlanEntities selector in my component to retrieve all entities:
this.store$.select(fromRoot.getPlanEntities)
.map(plan => {
if (plan.id != null)
{
return {id: plan.id, text: plan.name};
}
});
The issue lies with the type of the parameter plan. The compiler indicates that the type of plan is IPlan[], instead of a single IPlan. This results in errors like
Property 'id' does not exist on type 'IPlan[]'plan is an array rather than a single object.
I am unsure how to resolve this problem. Is there a way to access individual entities one by one instead of receiving them as an array?
EDIT
The objective is to obtain an Observable<IPlan> in my component from
this.store$.select(fromRoot.getPlanEntities)private plans$: Observable<IPlan>;
constructor(private store$: Store<IStore>, private fb: FormBuilder, private router: Router, injector: Injector)
{
this.plans$ = this.store$.select(fromRoot.getPlanEntities)
.map(planEntities => {
return planEntities
.find(plan => plan.id != null)
.map(plan => ({id :plan.id, text: plan.name}));
});
...
This can then be utilized in the template to display all current plans:
<div class="clearfix">
<div *ngIf="plans$ | async">
<div [innerHTML]="(plans$ | async).name"></div>
</div>