ngrx: selector type mapping

Question

This is my IStore:

export interface IStore {
  plans: IPlanRedux;
}

where IPlanRedux is:

export interface IPlanRedux {
    entities: { [key: string]: IPlan };
    ids: Array<string>;
}

export interface IPlan {
    id?: string;
    name?: string;
}

So, I need to create selectors from my plan state. The selectors I've created are:

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]); });

and on root.selectors.ts:

export const getPlansState = (state: IStore) => state.plans;
export const getPlanEntities = createSelector(getPlansState, fromPlans.getAll);

I've stuck with a compiler error I don't know how to solve. I'm trying to create an subscription using getPlanEntities selector into my component in order to get all entities:

this.store$.select(fromRoot.getPlanEntities)
    .map(plan => {
        if (plan.id != null)
        {
            return {id: plan.id, text: plan.name};
        }
    });

The problem is with the parameter type plan. Compiler tells me that plan's type is IPlan[], instead of a single IPlan. So, I'm getting compiler errors like Property 'id' does not exist on type 'IPlan[]' since plan is an IPlan[] instead of an IPlan.

I don't know how to deal with this issue. Is there anyway to get single entities one by one instead of a single array?

EDIT

The goal I want to achieve is to make an Observable<IPlan> into 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}));
        });
 ...

And use it on template in order to list all current plans:

<div class="clearfix">
    <div *ngIf="plans$ | async">
        <div [innerHTML]="(plans$ | async).name"></div>
   </div>

maxime1992 maxime1992 · Accepted Answer · 2017-03-14T09:14:51

I think you misunderstood the map here :

this.store$.select(fromRoot.getPlanEntities)
  .map(plan => {
      if (plan.id != null)
      {
          return {id: plan.id, text: plan.name};
      }
  });

It's not an ES6 map but a map on an Observable. You're simply retrieving your planEntities If you want to get one entity, you should do something like that :

this.store$.select(fromRoot.getPlanEntities)
  .map(planEntities => {
    return planEntities
      .find(plan => plan.id !== null)
      .map(plan => ({ id: plan.id, text: plan.name }));
  })
  .do((plan: {id: any, text: string}) => /* DO WHATEVER YOU WANT HERE */);

ngrx: selector type mapping

1 Answers