How do you use ngrx/store when you have data with ids?

Let's say we have a list with 100 heroes. Each hero has an id and a name property, so the hero model would be:

interface Hero {
  id: string;
  name: string;
}

I want to use ngrx/store with a hash-map (dictionary) datastructure for fast access of a single hero. So the hero-store would have the structure Observable<{[heroId: string]: Hero}>.

Then in my hero-component I want to load the hero by id, so it would look like:

<app-hero [heroId]="25"></app-hero>

and in the controller:

heroStore.subscribe(updatedStore => {
  this.hero = updatedStore[this.heroId];
}

This works, but it seems not ideal to me, since when just one hero is updated, in all 100 components the subscribe listener is triggered.

1. Does this have a negative impact on performance?
2. Is there a better way than this?

I thought about putting Observable<Hero> into the store instead of just Hero so the store would look like Observable<{[heroId: string]: Observable<Hero>}>

Then something like:

heroStore.getValue()[heroId].subscribe(hero => {
  this.hero = hero;
});

would be possible. But then again, this seems a little crazy. What's the suggested way of going about that? Or to be more specifically: How do you handle a hash-mapped resource-store with ngrx/store?