co jest store.select w ngrx

Question

Im nowe do Redux i zaczął z ngrx Im stanie zrozumieć, jaki jest sens tego wiersza kodu store.select

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

Answer 1

Wow, to jest wielki temat. Zasadniczo "wybierz" jest tak naprawdę operatorem RXJS, który jest używany w tym przypadku do pobierania wartości części obiektu stanu aplikacji. Powiedzmy, że główny stan aplikacji zawiera tablicę użytkowników i szereg funkcji bezpieczeństwa. "Wybierz" pozwala uzyskać odniesienie do obserwowalnego, którego wartością jest właśnie ta tablica użytkowników. Zanim przejdziesz do ngrx, naprawdę musisz się uczyć w Observables i RXJS. Znalazłem ten artykuł powiązany z główną stroną projektu Github dla ngrx.

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

RXJS i Redux może być wielkim tematem ale sugeruję pracy na wiedzy w małe kawałki wielkości ugryźć. Zajęło mi to około 2 miesięcy pracy z nim, zanim naprawdę poczułem się komfortowo. Nawet jeśli nie mieszkasz z ngrx, zrozumienie tego, jak działa RXJS, jest niezwykle użyteczne i warto poświęcić czas na naukę.

Oto najważniejszy artykuł, który daje dobre wprowadzenie do RXJS. https://gist.github.com/staltz/868e7e9bc2a7b8c1f754

Answer 2

Powoduje zwrócenie stanu o nazwie "zegar".

Oto przykład. W konstruktorze zapisuje się store.select, tym razem z "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'); 

...

W bootstrap, provideStore podano 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 się wszystkie reduktory zdefiniowane. Reduktor todos jest zdefiniowany następująco:

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 
      ]; 

Istnieje kilka sposobów, aby to zrobić, i można skomponować listę wszystkich reduktorów, zasadniczo określające serię kluczy obiektowych, które odnoszą się do obiektu reduktora.

Store.select zwraca obserwowalną możliwość zasubskrybowania elementu lub szablonu za pomocą "| async".

Answer 3

W bardzo prosty sposób wybierz, aby przywrócić kawałek danych ze stanu aplikacji zapakowany w Observable.

Co to oznacza, wybierz operator pobiera porcję danych, a następnie przekształca ją w obiekt obserwowalny. Więc to, co otrzymujesz, to Obserwowalna, która owija wymagane dane. Aby zużyć dane, musisz je zasubskrybować.

Zobaczmy bardzo prosty przykład.

1. Pozwala zdefiniować model naszego sklepu

   interfejs eksport AppStore { zegar: Data }

2. importu sklepu do swojego urządzenia z '@ ngrx/Store'

3. Utwórz sklep, wstrzykując do konstruktora

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

4. Select zwraca wartość obserwowalną.

   więc zadeklarować zmienną zegara w swojej składnika w następujący sposób: -

   public clock: Observable<Date>;

   Teraz można zrobić coś jak następuje: -

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