was store.select in NGRX

Question

Im neu zu redux und begannen mit NGRX Im nicht in der Lage zu verstehen, was ist der Sinn dieser Codezeile store.select

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

Answer 1

Wow, das ist ein großes Thema. Im Grunde genommen ist "Auswählen" also ein RXJS-Operator, der in diesem Fall verwendet wird, um den Wert eines Teils des Anwendungsstatusobjekts abzurufen. Nehmen wir an, Ihr Hauptanwendungsstatus enthält eine Reihe von Benutzern und eine Reihe von Sicherheitsfunktionen. "Auswählen" ermöglicht es Ihnen, einen Verweis auf eine Observable zu erhalten, deren Wert nur dieser Benutzergruppe entspricht. Bevor Sie sich mit ngrx beschäftigen, müssen Sie sich unbedingt mit Observables und RXJS befassen. Ich fand diesen Artikel verlinkt von der Haupt-Github-Projektseite für ngrx hilfreich.

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

RXJS und redux kann ein großes Thema sein, aber ich schlage vor, Ihr Wissen in kleinen Bissen Größe Stücke arbeiten. Es hat ungefähr zwei Monate gedauert, bis ich mich richtig wohl fühlte. Auch wenn Sie nicht bei ngrx bleiben, ist es unglaublich nützlich, zu verstehen, wie RXJS funktioniert, und es lohnt sich, diese Zeit zu investieren.

Hier ist ein wichtiger Artikel, der auch eine gute Einführung in RXJS gibt. https://gist.github.com/staltz/868e7e9bc2a7b8c1f754

Answer 2

Es gibt den Status 'Uhr' zurück.

Hier ist ein Beispiel. Im Konstruktor wird store.select aufgerufen, diesmal mit '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'); 

...

Im Bootstrap wird 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 gegeben alle Reduzierungen definiert. Der todos Minderer ist wie folgt definiert:

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

Es gibt ein paar Möglichkeiten, dies zu tun, und Sie können eine Liste aller Ihre Reduzierungen zusammensetzen, im Wesentlichen eine Reihe von Objektschlüsseln definiert, die zu einem Druckminderer Objekt beziehen.

Store.select gibt eine Observable zurück, die Sie entweder in Ihrer Komponente oder in Ihrer Vorlage über '| async' abonnieren können.

Answer 3

In sehr einfachen Worten gibt Ihnen Select ein Stück Daten aus dem Anwendungsstatus zurück, die in ein Observable eingewickelt sind.

Was es bedeutet, ist, wählen Sie den Operator erhält die Menge der Daten, die Sie brauchen, und dann wandelt es in ein Observable-Objekt. Also, was Sie zurückbekommen, ist ein Observable, der die erforderlichen Daten umschließt. Um die Daten zu verbrauchen, müssen Sie sie abonnieren.

Lass uns ein sehr einfaches Beispiel sehen.

1. Ermöglicht das Modell unseres Speichers

   Export-Schnittstelle App Store definieren { Uhr: Datum }

2. Import der Shop in Ihrer Komponente von '@ NGRX/store'

3. Erstellen Sie ein Geschäft durch Injizieren in den Konstruktor

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

4. Auswahl gibt ein Observable zurück.

   also die Uhr Variable in Ihrer Komponente erklären, wie folgt: -

   public clock: Observable<Date>;

   Jetzt können Sie etwas tun, wie folgt: -

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