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

В Angular фреймворке для управления глобальным состоянием приложения и упрощения работ с асинхронными операциями рекомендуется использовать пакет NGRX. Одной из ключевых концепций NGRX является store - хранилище данных, которое содержит все состояние приложения.

Для получения данных из store NGRX, есть несколько способов. Рассмотрим их более подробно:

1. Selectors (Селекторы)
Селекторы в NGRX позволяют получать определенные куски данных из store. Они представляют собой функции, которые выбирают нужные данные из store на основе переданных параметров.

Пример:

import { createSelector, createFeatureSelector } from '@ngrx/store';
import { AppState, User } from './app-state';

// Получаем состояние приложения
const getAppState = createFeatureSelector<AppState>('app');

// Получаем данные пользователя из состояния приложения
export const getUser = createSelector(
  getAppState,
  (state: AppState) => state.user
);

2. Subscription (Подписка)
Следующий способ - это подписка на изменения данных store. Вы можете подписаться на определенный селектор или просто на стор, чтобы получать все изменения.

Пример:

import { Component, OnInit } from '@angular/core';
import { Store } from '@ngrx/store';
import { AppState } from './app-state';
import { getUser } from './user.selector';

@Component({
  selector: 'app-user',
  template: `
    <div>{{ user | async }}</div>
  `
})
export class UserComponent implements OnInit {
  user: Observable<User>;

  constructor(private store: Store<AppState>) { }

  ngOnInit() {
    // Подписываемся на изменения данных пользователя
    this.user = this.store.select(getUser);
  }
}

3. AsyncPipe (Асинхронная трубка)
AsyncPipe предоставляет возможность получать и отображать асинхронные данные в шаблоне без необходимости подписываться на них вручную. Он работает с Observable и Promise и автоматически обновляет отображаемые данные при их изменении.

Пример:

import { Component, OnInit } from '@angular/core';
import { Store } from '@ngrx/store';
import { AppState } from './app-state';
import { getUser } from './user.selector';

@Component({
  selector: 'app-user',
  template: `
    <div>{{ user | async }}</div>
  `
})
export class UserComponent implements OnInit {
  user: Observable<User>;

  constructor(private store: Store<AppState>) { }

  ngOnInit() {
    // Получаем данные пользователя
    this.user = this.store.select(getUser);
  }
}

Таким образом, для получения данных из store NGRX можно использовать селекторы, подписку на изменения данных или AsyncPipe. Каждый способ имеет свои особенности и выбор зависит от конкретной ситуации и требований приложения.