Что такое store.select в ngrx

Проще говоря, select возвращает вам фрагмент данных из состояния приложения, завернутый в Observable.

Это означает, что оператор select получает необходимый фрагмент данных, а затем преобразует его в объект Observable. Итак, вы получаете обратно Observable, который упаковывает необходимые данные. Чтобы использовать данные, вам нужно подписаться на них.

Давайте посмотрим на очень простой пример.

1. Определим модель нашего магазина

   export interface AppStore {
      clock: Date
   }
   

2. Импортируйте Store в свой компонент из '@ngrx/store'

3. Создайте хранилище, внедрив его в конструктор

   constructor(private _store: Store<AppStore>){}
   

4. Select возвращает Observable.

   Итак, объявите переменную часов в вашем компоненте следующим образом:

   public clock: Observable<Date>;
   

   Теперь вы можете сделать что-то вроде следующего: -

   this.clock = this._store.select('clock');
   

Вау, это большая тема. Таким образом, в основном «выбор» на самом деле является оператором RXJS, который используется в этом случае для извлечения значения части объекта состояния приложения. Итак, скажем, ваше основное состояние приложения имеет множество пользователей и множество функций безопасности. «Выбрать» позволяет вам получить ссылку на наблюдаемый объект, значением которого является именно этот массив пользователей. Прежде чем приступить к работе с ngrx, вам действительно нужно изучить Observables и RXJS. Я нашел эту статью, связанную с главной страницей проекта Github для ngrx, полезной.

https://gist.github.com/btroncone/a6e4347326749f938510

RXJS и редуксы могут быть большой темой, но я предлагаю работать над своими знаниями небольшими порциями. Мне потребовалось около 2 месяцев работы с ним, прежде чем я действительно начал чувствовать себя комфортно. Даже если вы не останетесь с ngrx, понимание того, как работает RXJS, невероятно полезно и стоит потраченного времени на его изучение.

Вот основная статья, которая также дает хорошее введение в RXJS. https://gist.github.com/staltz/868e7e9bc2a7b8c1f754

Он возвращает состояние, называемое «часами».

Вот пример. В конструкторе вызывается store.select, на этот раз с todos.

https://github.com/btroncone/ngrx-examples/blob/master/todos/src/app/todo-app.ts

export class TodoApp {
    public todosModel$ : Observable<TodoModel>;
    //faking an id for demo purposes
    private id: number = 0;

    constructor(
        private _store : Store<AppState>
    ){
        const todos$ = _store.select<Observable<Todo[]>>('todos');
        const visibilityFilter$ = _store.select('visibilityFilter');

...

В начальной загрузке для ProvideStore задано значение APP_REDUCERS.

import {bootstrap} from '@angular/platform-browser-dynamic';
import {TodoApp} from './todo-app';
import {provideStore} from "@ngrx/store";
import * as APP_REDUCERS from "./reducers/reducers";


export function main() {
  return bootstrap(TodoApp, [
      provideStore(APP_REDUCERS)
  ])
  .catch(err => console.error(err));
}

APP_REDUCERS — это все определенные редукторы. Редуктор todos определяется следующим образом:

    import {ActionReducer, Action} from "@ngrx/store";
import {Todo} from "../common/interfaces";
import {ADD_TODO, REMOVE_TODO, TOGGLE_TODO} from "../common/actions";

export const todos : ActionReducer<Todo[]> = (state : Todo[] = [], action: Action) => {
  switch(action.type) {
      case ADD_TODO:
          return [
              ...state,
              action.payload
          ];

Есть несколько способов сделать это, и вы можете составить список всех ваших редьюсеров, по существу определив серию ключей объекта, которые ссылаются на объект редьюсера.

Store.select возвращает наблюдаемое, на которое вы можете подписаться либо в своем компоненте, либо в шаблоне через '|async'.

This.store.select('keyname') вернет данные из объекта хранилища свойства 'keyname'. вы можете дополнительно искать внутренний объект в магазине, используя несколько редукторов с StoreModule.forFeature("master", masterReducer) в основном модуле с createSelector

export const getMasterState = createFeatureSelector<myModels.MasterState>('master');
export const getMatserBranchList = createSelector(
    getMasterState,
    (state: myModels.MasterState): myModels.Branch[] => state.branchList
);