Какие есть способы получения данных из store NGRX?

Question

[even__odd]

Знаю, что можно получить данные создав подписчика для потока rxjs. Пробовал так:

export class PlayersComponent implements OnInit {
  players$: Observable<IPlayer[]>;
  players: IPlayer[];

 constructor(private store: Store<IAppState>) {
    this.players$ = store.pipe(select(selectPlayers));
    this.players$.subscribe(getSubscriber(this.players, "Players"));
  }
  .....
  .....
  kek() {
    this.store.dispatch(new GetPlayers());
    console.log('kek: Players -', this.players);
  }
}

// создает подписчика для потока для сохранения значений в локальную переменную
// (скорее всего это неправильно), мне хотелось таким образом через *ngFor создать всех игроков 
// не знаю как обработать поток players$ правильно в шаблоне
// планировал оттестировать и использовать в других компонентах
function getSubscriber(localStore: IPlayer[], streamName: string) {
  return {
    next: value => {
      console.log('In sub ' ,value);
      if (value) localStore = value; 
    },
    error: err => console.error(err),
    complete: () => console.debug(`stream ${streamName} - completed`)
  }
}

Есть какие-нибудь хорошие статьи про жизненный цикл компонента ? Про то как он создается, как вызывается конструктор и какие параметры туда передаются.
Совсем недавно стал интересоваться Angular и NGRX.

Comments

[Антон Швец]

конкретнее, с примерами.

[even__odd]

Антон Швец, обновил

Answer 1

[even__odd]

Моя задача стояла в том, что бы использовать данные из хранилища не создавая кучу "умных" и "глупых" компонентов (в умном создавался поток, а глупому, через '@Input' и pipe 'async' передавались значения). Проблема решилась с помощью использования директивы "ngTemplateOutlet" (клик)

Но так или иначе, вопрос остался открытым.

Comments

[Антон Швец]

у вас проблема в if (value) localStore = value;
localStore - это локальная переменная в пределах функции, записывая в нее новое значение вы никак не меняете инстанс компонента.

Далее, нет смысла использовать ngTemplateOutlet как в статье, статья плохая. Лучше таки выносить в компонент, да, в глупый.
*ngIf для разворачивания потока и уменьшения числа подписок это допустимо, но не темплейт, создание проблем на ровном месте, замучаешься потом тестировать все в куче.

this.players$.subscribe(getSubscriber(this.players, "Players"));

- вот это вот полностью лишнее.

[even__odd]

Антон Швец, спасибо. Но хотелось бы спросить: почему использование ngTempateOutlet является не правильным? Стоит ли его вообще использовать и в каких случаях это делать?

[Антон Швец]

even__odd, со временем появляется понимание, что в тех местах где вставляешь ngTempateOutlet на самом деле нужен компонент. Компоненты вообще для этого и созданы - вынесения кусочка представления в независимую сущность со входными параметрами.
И код будет смотреться гораздо лучше - вот контейнер с представлениями, вот представления, тестируются отдельно, стилизуются отдельно, легко заменить или переиспользовать.
Темплейт же нельзя вынести в отдельный файл.

ngTempateOutlet используется в случаях, если нужно разместить полученный извне темплейт. Например как тут

[even__odd]

Антон Швец, спасибо за объяснение