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

Im new to redux и начато с ngrx Im неспособным понять, что является смыслом этой строки store.select.select

 clock : Observable<Date>;
 this.clock = store.select('clock');

Ответ 1

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

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

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

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

Ответ 2

Возвращает состояние, называемое "clock".

Вот пример. В конструкторе 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');

...

В бутстрапе, предоставитьStore предоставляется 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'.

Ответ 3

В очень простых выражениях select возвращает вам фрагмент данных из состояния приложения, заключенного в Observable.

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

Позволяет определить модель нашего магазина

интерфейс экспорта AppStore { часы: дата }
Импортируйте Store в свой компонент из '@ngrx/store'
Создайте хранилище, вставив в конструктор

constructor(private _store: Store<AppStore>){}
Выбор возвращает наблюдаемый.

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

public clock: Observable<Date>;

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

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