1

To be honest, I'm not even sure this is an issue, but I'm curious about sharing my observables when using ngrx. Let's say you have these three variables in your store that control whether something is open or expanded:

export interface State {
    isSidebarActive: boolean;
    isPlaylistExpanded: boolean;
    isFolderListExpanded: boolean;
}

If you return all three variables with a single selector, you might end up with the same variable being used multiple times in your template. This isn't actual code, so bear with me:

<div [hidden]="!(uiState$ | async)?.isSidebarActive">
    <ul [@expand]="(uiState$ | async)?.isPlaylistExpanded">
        <li></li>
    </ul>
    <ul [@expand]="(uiState$ | async)?.isFolderListExpanded">
        <li></li>
    </ul>
</div>

From what I understand, this will create three unique subscriptions to uiState$, and you can use the .share() operator to share one subscription to all three items. If this is necessary, where would you share your Observable? Here?

constructor(private store: Store<fromRoot.State>) {
    this.uiState$ = this.store.select(fromRoot.getUiState).share();
}

Looking at this answer, I'm not even sure it is necessary.

TIA.

wolfhoundjesse
  • 1,085
  • 9
  • 32
  • If you want to avoid that kind of problem and also do not open multiple subscrpitions, you might use the new `ngIf` syntax with as. Thus you'll only have one `async` pipe needed in your example. That said, I'm also interested into that question, not really for the store, because data from the store are local, and you know that there won't be any heavy computation when selecting parts of your store. Ngrx will only returns a value, most often by reference so it doesn't really matter. BUT, that kind of things could have an impact on perf for example with `selectors`! – maxime1992 Jul 29 '17 at 10:28
  • 1
    Because if your selector does a lot of computations and you subscribe x times to it, every time the store will change, you'll pass x times within the selector. – maxime1992 Jul 29 '17 at 10:28
  • For anyone having problem using .share(), dont forgot to import 'rxjs/add/operator/share'; – Claysson Sep 08 '17 at 20:04

0 Answers0